<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">

    <title>zui-动画</title>
    <link rel="shortcut icon" type="image/x-icon" href="http://hoppinzq.com/zui/static/favicon/favicon.ico">
    <link rel="stylesheet" href="http://hoppinzq.com/zui/static/css/vendors_css.css">
    <link rel="stylesheet" href="http://hoppinzq.com/static/css/plugins/highlight.css"/>

    <link rel="stylesheet" href="http://hoppinzq.com/zui/static/css/style.min.css">
    <link rel="stylesheet" href="http://hoppinzq.com/zui/static/css/skin_color.css">
    <style>
        .rect {
            width: 25px;
            height: 25px;
        }

        .circle {
            width: 25px;
            height: 25px;
            border-radius: 50%;
        }

        .font-anime-style {
            font-size: 16px;
            font-weight: bold;
        }

        pre {
            max-height: 200px;
        }

        pre::-webkit-scrollbar {
            width: 9px;
            height: 9px;
        }

        pre::-webkit-scrollbar-track-piece {
            background-color: #ebebeb;
            -webkit-border-radius: 4px;
        }

        pre::-webkit-scrollbar-thumb:vertical {
            height: 32px;
            background-color: #ccc;
            -webkit-border-radius: 4px;
        }

        pre::-webkit-scrollbar-thumb:horizontal {
            width: 32px;
            background-color: #ccc;
            -webkit-border-radius: 4px;
        }
        .anime-item {
            display: flex; }
        .anime-item + .anime-item {
            padding-left: 0.5rem; }
        .anime-item + .anime-item::before {
            display: inline-block;
            padding-right: 0.5rem;
            color: #6c757d;
            content: "—"; }
        .anime-item + .anime-item:hover::before {
            text-decoration: underline; }
        .anime-item + .anime-item:hover::before {
            text-decoration: none; }
        .anime-item.active {
            color: #6c757d; }
    </style>

</head>
<body class="hold-transition light-skin sidebar-mini theme-primary fixed">

<div class="wrapper">

    <div id="preloader" class="center">
        <span>H</span><span>O</span><span>P</span><span>P</span><span>I</span><span>N</span><span>Z</span><span>Q</span>
    </div>
    <header class="main-header">
        <div class="d-flex align-items-center logo-box justify-content-start">
            <a href="#" class="waves-effect waves-light nav-link d-none d-md-inline-block mx-10 push-btn bg-transparent"
               data-toggle="push-menu" role="button">
                <span class="icon-Align-left"><span class="path1"></span><span class="path2"></span><span
                        class="path3"></span></span>
            </a>
            <a href="index.html" class="logo">
                <div class="logo-lg">
                    <span class="light-logo"><img src="http://hoppinzq.com/zui/static/picture/logo-dark-text.png"
                                                  alt="logo"></span>
                    <span class="dark-logo"><img src="http://hoppinzq.com/zui/static/picture/logo-light-text.png"
                                                 alt="logo"></span>
                </div>
            </a>
        </div>
        <nav class="navbar navbar-static-top">
            <div class="app-menu">
                <ul class="header-megamenu nav">
                    <li class="btn-group nav-item d-md-none">
                        <a href="#" class="waves-effect waves-light nav-link push-btn" data-toggle="push-menu"
                           role="button">
                            <span class="icon-Align-left"><span class="path1"></span><span class="path2"></span><span
                                    class="path3"></span></span>
                        </a>
                    </li>
                    <li class="btn-group nav-item d-none d-xl-inline-block">
                        <a href="contact_app_chat.html" class="waves-effect waves-light nav-link svg-bt-icon"
                           title="聊天">
                            <i class="icon-Chat"><span class="path1"></span><span class="path2"></span></i>
                        </a>
                    </li>
                    <li class="btn-group nav-item d-none d-xl-inline-block">
                        <a href="mailbox.html" class="waves-effect waves-light nav-link svg-bt-icon" title="邮箱">
                            <i class="icon-Mailbox"><span class="path1"></span><span class="path2"></span></i>
                        </a>
                    </li>
                    <li class="btn-group nav-item d-none d-xl-inline-block">
                        <a href="extra_taskboard.html" class="waves-effect waves-light nav-link svg-bt-icon" title="任务">
                            <i class="icon-Clipboard-check"><span class="path1"></span><span class="path2"></span><span
                                    class="path3"></span></i>
                        </a>
                    </li>
                </ul>
            </div>
            <div id="wrapper-silder-bar">
                <marquee class="first" scrollamount=12 onclick="closeSilderBar()" onmouseover="this.stop()"
                         onmouseout="this.start()">
                    <dl id="ticker">
                        <dt>重要通知</dt>
                        <dd>后台管理系统和部分工具的访问需要管理员权限！部分页面的访问需要登录权限！请前往zq统一权限页面登录。</dd>
                    </dl>
                </marquee>
            </div>
            <div class="navbar-custom-menu r-side">
                <ul class="nav navbar-nav">
                    <li class="btn-group nav-item d-lg-inline-flex d-none">
                        <a href="#" data-provide="fullscreen" class="waves-effect waves-light nav-link full-screen"
                           title="全屏">
                            <i class="icon-Expand-arrows"><span class="path1"></span><span class="path2"></span></i>
                        </a>
                    </li>
                    <li class="btn-group d-lg-inline-flex d-none">
                        <div class="app-menu">
                            <div class="search-bx mx-5">
                                <form>
                                    <div class="input-group">
                                        <input type="search" class="form-control" placeholder="搜索" aria-label="Search"
                                               aria-describedby="button-addon2">
                                        <div class="input-group-append">
                                            <button class="btn" type="submit" id="button-addon3"><i
                                                    class="ti-search"></i></button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </li>
                    <li class="dropdown notifications-menu">
                        <a href="#" class="waves-effect waves-light dropdown-toggle" data-toggle="dropdown"
                           title="消息提醒">
                            <i class="icon-Notifications"><span class="path1"></span><span class="path2"></span></i>
                        </a>
                        <ul class="dropdown-menu animated bounceIn">

                            <li class="header">
                                <div class="p-20">
                                    <div class="flexbox">
                                        <div>
                                            <h4 class="mb-0 mt-0">消息提醒</h4>
                                        </div>
                                        <div>
                                            <a href="#" class="text-danger">清除全部</a>
                                        </div>
                                    </div>
                                </div>
                            </li>

                            <li>
                                <ul class="menu sm-scrol">
                                    <li>
                                        <a href="#">
                                            <i class="fa fa-users text-info"></i> 来自 DOTA2群 群消息
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="fa fa-warning text-warning"></i> 陌生人的消息
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="fa fa-users text-danger"></i> xxx已经退出 CSGO 群
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="fa fa-shopping-cart text-success"></i> 狙击精英5 已经添加至购物车
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="fa fa-user text-danger"></i> 错误的用户
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="fa fa-user text-primary"></i> 未认证的用户
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="fa fa-user text-success"></i> 来自用户dignitas的私聊
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="footer">
                                <a href="#">查看所有</a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown user user-menu">
                        <a href="#" class="waves-effect waves-light dropdown-toggle" data-toggle="dropdown" title="用户">

                        </a>
                        <ul class="dropdown-menu animated flipInX">
                            <li class="user-body">

                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" data-toggle="control-sidebar" title="设置" class="waves-effect waves-light">
                            <i class="icon-Settings"><span class="path1"></span><span class="path2"></span></i>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <aside class="main-sidebar">
        <section class="sidebar position-relative">
            <div class="multinav">
                <div class="multinav-scroll" style="height: 100%;">
                    <ul class="sidebar-menu" data-widget="tree"></ul>
                </div>
            </div>
        </section>
        <div class="sidebar-footer"></div>
    </aside>

    <div class="content-wrapper">
        <div class="container-full">
            <div class="content-header">
                <div class="d-flex align-items-center">
                    <div class="mr-auto">
                        <h3 class="page-title">JS动画</h3>
                        <div class="d-inline-block align-items-center">
                            <nav>
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="#"><i class="mdi mdi-home-outline"></i></a>
                                    </li>
                                    <li class="breadcrumb-item" aria-current="page">UI</li>
                                    <li class="breadcrumb-item" aria-current="page">动画</li>
                                    <li class="breadcrumb-item active" aria-current="page">JS动画</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>

            <section class="content">
                <div class="box">
                    <div class="box-header">
                        <h4 class="box-title mb-15">基于anime.js</h4>
                        <span class="text-muted d-block">Anime.js是一个轻量的JavaScript 动画库，拥有简单而强大的API。
可对 CSS 属性、 SVG、 DOM 和JavaScript 对象进行动画。可以访问<a
                                href="https://www.animejs.cn/documentation/">中文官网</a></span>
                        <span class="text-muted d-block">内容导航：</span>
                        <ol class="breadcrumb">
                            <li class="anime-item"><a href="#anime1">可动画的目标属性</a></li>
                            <li class="anime-item"><a href="#anime2">动画的目标对象</a></li>
                            <li class="anime-item"><a href="#anime3">动画基础参数</a></li>
                            <li class="anime-item"><a href="#anime4">方向和循环</a></li>
                            <li class="anime-item"><a href="#anime5">动画赋值方式</a></li>
                            <li class="anime-item"><a href="#anime6">动画关键帧</a></li>
                            <li class="anime-item"><a href="#anime7">交错动画</a></li>
                            <li class="anime-item"><a href="#anime8">时间轴</a></li>
                            <li class="anime-item"><a href="#anime_svg">SVG</a></li>
                            <li class="anime-item"><a href="#anime9">时间曲线</a></li>
                        </ol>
                    </div>
                </div>
                <div class="box" id="anime1">
                    <div class="box-header">
                        <h4 class="box-title mb-15">可动画的目标属性</h4>
                        <span class="text-muted d-block">
						可使用任意CSS选择器，dom节点，js对象作为动画目标，但CSS选择器不能使用伪造元素
					</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">CSS选择器</h6>

                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">var animation=anime({
  targets: '.css-selector-demo1',
  translateX: 250
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="css-selector-demo1 circle bg-danger"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">DOM元素 /元素序列</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">var elements = document.querySelectorAll('.dom-node-demo2');
var animation=anime({
  targets: elements,
  translateX: 250
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="dom-node-demo2 rect bb-3 bg-danger"></div>
                                <div class="dom-node-demo2 rect bb-3 bg-danger"></div>
                                <div class="dom-node-demo2 rect bg-danger"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">JAVASCRIPT对象</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">var logEl = document.querySelector('.battery-log');
var battery = {
  charged: '0%',
  cycles: 120
}
anime({
  targets: battery,
  charged: '100%',
  cycles: 130,
  round: 1,
  easing: 'linear',
  update: function() {
    logEl.innerHTML = JSON.stringify(battery);
  }
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <pre class="battery-log font-anime-style"
                                     style="color: red">{"charged":"0%","cycles":0}</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box" id="anime2">
                    <div class="box-header">
                        <h4 class="box-title mb-15">动画的目标对象</h4>
                        <span class="text-muted d-block">
						大多数CSS属性都会导致布局更改或重新绘制，并会导致动画不稳定。优先的是opacity和CSS transforms。
					</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">CSS 属性</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.css-prop-demo1',
  translateX: '250px',
  backgroundColor: '#FF8F42',
  borderRadius: ['0%', '50%'],
  easing: 'easeInOutQuad'
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="css-prop-demo1 rect bg-warning"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">CSS3 TRANSFORMS 属性</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.css-transforms-demo1',
  translateX: 250,
  scale: 2,
  rotate: '1turn'
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="css-transforms-demo1 rect bg-warning"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">SVG 属性</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: ['.svg-attributes-demo polygon', 'feTurbulence', 'feDisplacementMap'],
  points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96',
  baseFrequency: 0,
  scale: 1,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutExpo'
});</code></pre>
                            </div>
                            <div class="box-footer svg-attributes-demo">
                                <svg width="128" height="128" viewBox="0 0 128 128" class="text-warning">
                                    <filter id="displacementFilter">
                                        <feTurbulence type="turbulence" baseFrequency=".05" numOctaves="2"
                                                      result="turbulence"></feTurbulence>
                                        <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15"
                                                           xChannelSelector="R"
                                                           yChannelSelector="G"></feDisplacementMap>
                                    </filter>
                                    <polygon points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100"
                                             style="filter: url(#displacementFilter)" fill="currentColor"></polygon>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box" id="anime3">
                    <div class="box-header">
                        <h4 class="box-title mb-15">动画基础参数</h4>
                        <span class="text-muted d-block">
						参数有持续时间、延迟、末端延迟、时间曲线函数、数字格式等，时间都是以毫秒为单位
					</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">持续时间参数：duration</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.duration-demo',
  translateX: 250,
  duration: 3000
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="duration-demo rect bg-success"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">延迟参数：delay</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.delay-demo',
  translateX: 250,
  delay: 1000
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="delay-demo rect bg-success"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">末端延迟参数：endDelay</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.end-delay-demo',
  translateX: 250,
  endDelay: 500,
  direction: 'alternate'
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="end-delay-demo rect bg-success"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">时间曲线：easing</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.easing-demo',
  translateX: 250,
  easing: 'easeInOutExpo'
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="easing-demo rect bg-success"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">数字格式：round</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">var roundLogEl = document.querySelector('.round-log');
anime({
  targets: roundLogEl,
  innerHTML: [0, 10000],
  easing: 'linear',
  round: 10
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="round-log font-anime-style text-success">
                                    0
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">特殊属性：参照<a
                                        href="https://www.animejs.cn/documentation/#specificPropParameters">文档</a></h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.specific-prop-params-demo',
  translateX: {
    value: 250,
    duration: 800
  },
  rotate: {
    value: 360,
    duration: 1800,
    easing: 'easeInOutSine'
  },
  scale: {
    value: 2,
    duration: 1600,
    delay: 800,
    easing: 'easeInOutQuart'
  },
  delay: 300
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="specific-prop-params-demo rect bg-success"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">FUNCTION 参数：参照 <a
                                        href="https://www.animejs.cn/documentation/#functionBasedParameters">文档</a></h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.function-based-params-demo',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  delay: function(el, i, l) {
    return i * 100;
  },
  endDelay: function(el, i, l) {
    return (l - i) * 100;
  }
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="function-based-params-demo rect bg-success"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box" id="anime4">
                    <div class="box-header">
                        <h4 class="box-title mb-15">方向和循环</h4>
                        <span class="text-muted d-block">可以定义动画的方向和往返次数</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">方向：direction</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.dir-normal',
  translateX: 250,
  easing: 'easeInOutSine'
});

anime({
  targets: '.dir-reverse',
  translateX: 250,
  direction: 'reverse',
  easing: 'easeInOutSine'
});

anime({
  targets: '.dir-alternate',
  translateX: 250,
  direction: 'alternate',
  easing: 'easeInOutSine'
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="dir-normal rect bg-info mb-5"></div>
                                <div class="dir-reverse rect bg-info mb-5"></div>
                                <div class="dir-alternate rect bg-info"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">循环：loop</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.loop',
  translateX: 270,
  loop: 3,
  easing: 'easeInOutSine'
});

anime({
  targets: '.loop-infinity',
  translateX: 270,
  loop: true,
  easing: 'easeInOutSine'
});

anime({
  targets: '.loop-reverse',
  translateX: 270,
  loop: 3,
  direction: 'reverse',
  easing: 'easeInOutSine'
});

anime({
  targets: '.loop-reverse-infinity',
  translateX: 270,
  direction: 'reverse',
  loop: true,
  easing: 'easeInOutSine'
});

anime({
  targets: '.loop-alternate',
  translateX: 270,
  loop: 3,
  direction: 'alternate',
  easing: 'easeInOutSine'
});

anime({
  targets: '.loop-alternate-infinity',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutSine'
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="loop rect bg-info mb-5"></div>
                                <div class="loop-infinity rect bg-info mb-5"></div>
                                <div class="loop-reverse rect bg-info mb-5"></div>
                                <div class="loop-reverse-infinity rect bg-info mb-5"></div>
                                <div class="loop-alternate rect bg-info mb-5"></div>
                                <div class="loop-alternate-infinity rect bg-info"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box" id="anime5">
                    <div class="box-header">
                        <h4 class="box-title mb-15">动画赋值方式</h4>
                        <span class="text-muted d-block">请参照 <a
                                href="https://www.animejs.cn/documentation/#unitlessValue">文档</a></span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">无单位数值</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.unitless-values-demo',
  translateX: 250,
  rotate: 540
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="unitless-values-demo circle bg-primary"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">有单位数值</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.specific-unit-values-demo',
  width: '100%',
  easing: 'easeInOutQuad',
  direction: 'alternate',
  loop: true
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="specific-unit-values-demo rect bg-primary"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">相对数值</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">var relativeEl = document.querySelector('.relative-values');
relativeEl.style.transform = 'translateX(100px)';
anime({
  targets: '.relative-values',
  translateX: {
    value: '*=2.5',
    duration: 1000
  },
  width: {
    value: '-=20px',
    duration: 1800,
    easing: 'easeInOutSine'
  },
  rotate: {
    value: '+=2turn',
    duration: 1800,
    easing: 'easeInOutSine'
  },
  direction: 'alternate'
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="relative-values circle bg-primary"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">颜色</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">var colorsExamples = anime.timeline({
  endDelay: 1000,
  easing: 'easeInOutQuad',
  direction: 'alternate',
  loop: true
})
.add({ targets: '.color-hex',  background: '#4fab45' }, 0)
.add({ targets: '.color-rgb',  background: 'rgb(204,60,60)' }, 0)
.add({ targets: '.color-hsl',  background: 'hsl(0, 25%, 60%)' }, 0)
.add({ targets: '.color-rgba', background: 'rgba(161,119,164, .6)' }, 0)
.add({ targets: '.color-hsla', background: 'hsla(0, 30%, 10%, .2)' }, 0)
.add({ targets: '.colors-demo', translateX: 250 }, 0);</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="color-hex circle mb-5" style="background: #007bff"></div>
                                <div class="color-rgb circle mb-5" style="background: #007bff"></div>
                                <div class="color-hsl circle mb-5" style="background: #007bff"></div>
                                <div class="color-rgba circle mb-5" style="background: #007bff"></div>
                                <div class="color-hsla circle mb-5" style="background: #007bff"></div>
                                <div class="colors-demo circle" style="background: #007bff"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">设定动画初始值</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.from-to-values',
  translateX: [100, 250],
  delay: 500,
  direction: 'alternate',
  loop: true
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="from-to-values circle bg-primary"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">函数返回数值</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.function-based-values-demo',
  translateX: function(el) {
    return el.getAttribute('data-x');
  },
  translateY: function(el, i) {
    return 50 + (-50 * i);
  },
  scale: function(el, i, l) {
    return (l - i) + .25;
  },
  rotate: function() { return anime.random(-360, 360); },
  borderRadius: function() { return ['50%', anime.random(10, 35) + '%']; },
  duration: function() { return anime.random(1200, 1800); },
  delay: function() { return anime.random(0, 400); },
  direction: 'alternate',
  loop: true
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div data-x="170"
                                     class="function-based-values-demo circle bg-primary-light mb-20"></div>
                                <div data-x="170" class="function-based-values-demo circle bg-info mb-20"></div>
                                <div data-x="170" class="function-based-values-demo circle bg-primary"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box" id="anime6">
                    <div class="box-header">
                        <h4 class="box-title mb-15">动画关键帧
                        </h4>
                        <span class="text-muted d-block">使用动画帧控制动画</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">动画关键帧：keyframes</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.animation-keyframes-demo',
  keyframes: [
    {translateY: -40},
    {translateX: 280},
    {translateY: 40},
    {translateX: 0},
    {translateY: 0}
  ],
  duration: 4000,
  easing: 'easeOutElastic(1, .8)',
  loop: true
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="animation-keyframes-demo circle bg-dark mt-30 mb-40 ml-20"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">属性关键帧</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.property-keyframes-demo',
  translateX: [
    { value: 250, duration: 1000, delay: 500 },
    { value: 0, duration: 1000, delay: 500 }
  ],
  translateY: [
    { value: -40, duration: 500 },
    { value: 40, duration: 500, delay: 1000 },
    { value: 0, duration: 500, delay: 1000 }
  ],
  scaleX: [
    { value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
    { value: 1, duration: 900 },
    { value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
    { value: 1, duration: 900 }
  ],
  scaleY: [
    { value: [1.75, 1], duration: 500 },
    { value: 2, duration: 50, delay: 1000, easing: 'easeOutExpo' },
    { value: 1, duration: 450 },
    { value: 1.75, duration: 50, delay: 1000, easing: 'easeOutExpo' },
    { value: 1, duration: 450 }
  ],
  easing: 'easeOutElastic(1, .8)',
  loop: true
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="property-keyframes-demo circle bg-dark mt-30 mb-40 ml-20"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box" id="anime7">
                    <div class="box-header">
                        <h4 class="box-title mb-15">交错动画</h4>
                        <span class="text-muted d-block">允许你为多个元素设置动画</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">基础交错动画</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.basic-staggering-demo',
  translateX: 270,
  delay: anime.stagger(100)
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="basic-staggering-demo rect bg-success mb-5"></div>
                                <div class="basic-staggering-demo rect bg-success mb-5"></div>
                                <div class="basic-staggering-demo rect bg-success mb-5"></div>
                                <div class="basic-staggering-demo rect bg-success mb-5"></div>
                                <div class="basic-staggering-demo rect bg-success mb-5"></div>
                                <div class="basic-staggering-demo rect bg-success"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">设定交错开始值</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.staggering-start-value-demo',
  translateX: 270,
  delay: anime.stagger(100, {start: 500})
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="staggering-start-value-demo rect bg-success mb-5"></div>
                                <div class="staggering-start-value-demo rect bg-success mb-5"></div>
                                <div class="staggering-start-value-demo rect bg-success mb-5"></div>
                                <div class="staggering-start-value-demo rect bg-success mb-5"></div>
                                <div class="staggering-start-value-demo rect bg-success mb-5"></div>
                                <div class="staggering-start-value-demo rect bg-success"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">设定交错范围值</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.range-value-staggering-demo',
  translateX: 270,
  rotate: anime.stagger([-360, 360]),
  easing: 'easeInOutQuad'
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="range-value-staggering-demo rect bg-success mb-5"></div>
                                <div class="range-value-staggering-demo rect bg-success mb-5"></div>
                                <div class="range-value-staggering-demo rect bg-success mb-5"></div>
                                <div class="range-value-staggering-demo rect bg-success mb-5"></div>
                                <div class="range-value-staggering-demo rect bg-success mb-5"></div>
                                <div class="range-value-staggering-demo rect bg-success"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">交错动画开始位置</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.staggering-from-demo',
  translateX: 270,
  delay: anime.stagger(100, {from: 'center'})
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="staggering-from-demo rect bg-success mb-5"></div>
                                <div class="staggering-from-demo rect bg-success mb-5"></div>
                                <div class="staggering-from-demo rect bg-success mb-5"></div>
                                <div class="staggering-from-demo rect bg-success mb-5"></div>
                                <div class="staggering-from-demo rect bg-success mb-5"></div>
                                <div class="staggering-from-demo rect bg-success"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">交错动画方向</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.staggering-direction-demo',
  translateX: 270,
  delay: anime.stagger(100, {direction: 'reverse'})
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="staggering-direction-demo rect bg-success mb-5"></div>
                                <div class="staggering-direction-demo rect bg-success mb-5"></div>
                                <div class="staggering-direction-demo rect bg-success mb-5"></div>
                                <div class="staggering-direction-demo rect bg-success mb-5"></div>
                                <div class="staggering-direction-demo rect bg-success mb-5"></div>
                                <div class="staggering-direction-demo rect bg-success"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">交错的时间曲线</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.staggering-easing-demo',
  translateX: 250,
  delay: anime.stagger(300, {easing: 'easeOutQuad'})
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="staggering-easing-demo rect bg-success mb-5"></div>
                                <div class="staggering-easing-demo rect bg-success mb-5"></div>
                                <div class="staggering-easing-demo rect bg-success mb-5"></div>
                                <div class="staggering-easing-demo rect bg-success mb-5"></div>
                                <div class="staggering-easing-demo rect bg-success mb-5"></div>
                                <div class="staggering-easing-demo rect bg-success"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">网格交错</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.an-g1 .staggering-grid-demo',
  scale: [
    {value: .1, easing: 'easeOutSine', duration: 500},
    {value: 1, easing: 'easeInOutQuad', duration: 1200}
  ],
  delay: anime.stagger(200, {grid: [14, 5], from: 'center'})
});</code></pre>
                            </div>
                            <div class="box-footer" style="height:220px;padding: 1.5rem 1rem;">
                                <div class="an-g1" style="display: flex;flex-wrap: wrap;position:absolute;">
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                </div>
                                <div class="an-g1" style="display: flex;flex-wrap: wrap;position:absolute;opacity: .2;">
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">网格交错方向</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.an-g2 .staggering-grid-demo',
  translateX: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'x'}),
  translateY: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'y'}),
  rotateZ: anime.stagger([0, 90], {grid: [14, 5], from: 'center', axis: 'x'}),
  delay: anime.stagger(200, {grid: [14, 5], from: 'center'}),
  easing: 'easeInOutQuad'
});</code></pre>
                            </div>
                            <div class="box-footer" style="height:220px;padding: 1.5rem 1rem;">
                                <div class="an-g2" style="display: flex;flex-wrap: wrap;position:absolute;">
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                </div>
                                <div class="an-g2" style="display: flex;flex-wrap: wrap;position:absolute;opacity: .2;">
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                    <div class="staggering-grid-demo rect bg-success mt-1 ml-1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box" id="anime8">
                    <div class="box-header">
                        <h4 class="box-title mb-15">时间轴</h4>
                        <span class="text-muted d-block">可让你将多个动画同步在一起</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">基础时间轴</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">var tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});

tl
.add({
  targets: '.basic-timeline-demo1',
  translateX: 250,
})
.add({
  targets: '.basic-timeline-demo2',
  translateX: 250,
})
.add({
  targets: '.basic-timeline-demo3',
  translateX: 250,
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="basic-timeline-demo1 rect bg-warning mb-5"></div>
                                <div class="basic-timeline-demo2 circle bg-warning mb-5"></div>
                                <div class="basic-timeline-demo3 rect bg-warning"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">时间轴偏移量</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">var tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});
tl
.add({
  targets: '.offsets-demo1',
  translateX: 250,
})
.add({
  targets: '.offsets-demo2',
  translateX: 250,
}, '-=600')
.add({
  targets: '.offsets-demo3',
  translateX: 250,
}, 0);</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="offsets-demo1 rect bg-warning mb-5"></div>
                                <div class="offsets-demo2 circle bg-warning mb-5"></div>
                                <div class="offsets-demo3 rect bg-warning"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">参数继承</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">var tl = anime.timeline({
  targets: '.params-inheritance-demo',
  delay: function(el, i) { return i * 200 },
  duration: 500,
  easing: 'easeOutExpo',
  direction: 'alternate',
  loop: true
});
tl
.add({
  translateX: 250,
  easing: 'spring',
})
.add({
  opacity: .5,
  scale: 2
})
.add({
  targets: '.params-inheritance-demo .params-inheritance-demo2',
  rotate: 180
})
.add({
  translateX: 0,
  scale: 1
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="params-inheritance-demo rect bg-warning mb-5"></div>
                                <div class="params-inheritance-demo circle bg-primary mb-5"></div>
                                <div class="params-inheritance-demo params-inheritance-demo2 rect bg-warning"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box" id="anime_svg">
                    <div class="box-header">
                        <h4 class="box-title mb-15">SVG</h4>
                        <span class="text-muted d-block">动画一个元素，使之相对于SVG路径的x，y和角度值运动。</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">运动路径动画</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">var path = anime.path('.motion-path-demo path');
anime({
  targets: '.motion-path-demo .el',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  easing: 'linear',
  duration: 2000,
  loop: true
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="demo-content motion-path-demo">
                                    <div class="motion-path">
                                        <div class="rect bg-success el follow-path" style="transform: translateX(92.7483px) translateY(74.0054px) rotate(59.3037deg);"></div>
                                        <svg width="256" height="112" viewBox="0 0 256 112">
                                            <path fill="none" stroke="currentColor" stroke-width="1" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"></path>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">变形动画</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre><code class="language-javascript">anime({
  targets: '.morphing-demo .polymorph',
  points: [
    { value: [
      '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369',
      '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369']
    },
    { value: '70 6 119.574 60.369 100.145 117.631 39.855 117.631 55.426 68.369' },
    { value: '70 57 136.574 54.369 89.145 100.631 28.855 132.631 38.426 64.369' },
    { value: '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' }
  ],
  easing: 'easeOutQuad',
  duration: 2000,
  loop: true
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="morphing-demo">
                                    <svg width="140" height="140" viewBox="0 0 140 140">
                                        <g fill="none" fill-rule="evenodd">
                                            <g fill="currentColor" fill-opacity=".15" transform="translate(0 6)">
                                                <polygon points="70 0 136.574 48.369 111.145 126.631 28.855 126.631 3.426 48.369"></polygon>
                                                <polygon points="70 18 119.455 53.931 100.565 112.069 39.435 112.069 20.545 53.931"></polygon>
                                                <polygon points="70 34.86 101.727 57.911 89.609 95.209 50.391 95.209 38.273 57.911"></polygon>
                                                <polygon points="70 50.898 84.864 61.697 79.186 79.171 60.814 79.171 55.136 61.697"></polygon>
                                            </g>
                                            <polygon class="polymorph" stroke-width="1" stroke="currentColor" points="70 25.142770865943756 120.16270014306193 60.16122347891932 99.76407637801874 117.04229985693806 50.0931527560375 102.70451202558353 4.638029706303989 54.715294201801136 "></polygon>
                                        </g>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">画线动画</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre>
<code class="language-javascript">anime({
  targets: '.line-drawing-demo .lines path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 1500,
  delay: function(el, i) { return i * 250 },
  direction: 'alternate',
  loop: true
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="line-drawing-demo">
                                    <svg viewBox="0 0 460 180" style="width: 100%;height: 100%" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
                                        <g class="lines">
                                            <title>HOPPINZQ</title>
                                            <path d="m8.055555,18.029514c0,0.555555 0.254891,0.940798 0.555555,1.666666c0.425203,1.026533 0,1.666666 0,2.777779c0,1.111111 0,2.777777 0,3.888887c0,1.111113 0,2.777779 0,3.888889c0,1.666668 0,3.333332 0,5c0,1.666668 0,2.777779 0,3.888889c0,1.666668 0,2.777779 0,4.444443c0,1.111115 0,2.777779 0,4.444447c0,1.111111 0,2.222221 0,3.333332c0,1.666668 0,2.777779 0,4.444447c0,1.111111 0,2.222221 0,3.888889c0,1.111111 0,2.222221 0,3.888885c0,0.555557 0,2.222221 0,3.333336c0,1.111107 0,2.222221 0,3.888885c0,1.111115 -0.555555,2.222221 -0.555555,3.888893c0,0.555557 0,1.666664 0,2.777779c0,1.111107 0.127642,2.237083 0,2.777779c-0.285413,1.209023 -0.555555,2.222221 -0.555555,2.777771c0,1.111115 0,2.222229 0,3.333336c0,1.111115 0,2.222221 0,3.333336c0,1.111107 0,2.222221 0,3.333328c0,1.111115 0,2.222229 0,3.333336c0,0.555557 0,1.666664 0,2.222221c0,1.111115 0,2.222221 0,2.777779c0,0.555557 0,1.111115 0,2.222221c0,1.111115 0,1.666672 0,2.222221c0,0.555557 0,1.111115 0,1.666672c0,0.55555 0,1.666664 0,2.222221c0,0.555557 0,1.111107 0,1.666664c0,0.555557 0,1.111115 0,1.666664c0,0.555557 0,1.111115 0,1.666672c0,0.555557 0,1.111107 0,1.666664c0,0.555557 0,1.111115 0,2.222221c0,0.555557 0,1.111115 0,1.666672c0,0.55555 0,1.111107 0,1.666664c0,0.555557 -0.212602,1.153397 0,1.666664c0.300664,0.725868 0.555555,1.111115 0.555555,1.666672c0,0.55555 0.162719,0.718269 0.555555,1.111107c0.392838,0.392838 0,1.111115 0,1.666664c0,0.555557 0,1.111115 0,1.666672c0,0.555557 0,1.111115 0,1.666672c0,0.555542 0,1.111099 0,1.666656c0,0.555557 0.212602,1.153397 0,1.666672c-0.300664,0.725876 -0.555555,1.111115 -0.555555,1.666672c0,0.555542 0,1.111099 0,1.666656c0,1.111115 0,1.666672 0,2.222229c0,0.555557 0,1.111115 0,1.666656c0,0.555557 0,1.111115 0,1.666672c0,0.555557 0,1.111115 0,1.666672c0,0.555557 0,1.111115 0.555555,1.111115c0.555556,0 1.111112,0 1.666667,0c0.555555,0 1.111112,0 1.666667,0c1.111111,0 1.666666,0 2.777778,0c1.111111,0 1.666667,0 2.222222,0c0.555555,0 1.273829,0.392838 1.666666,0c0.392838,-0.392838 0,-1.111115 0,-1.666672c0,-0.555557 0,-1.666672 0,-2.222229c0,-0.555557 0,-1.111099 0,-2.222214c0,-0.555557 0,-1.111115 0,-1.666672c0,-1.111115 0,-1.666672 0,-2.222214c0,-0.555557 0.555555,-1.111115 0.555555,-1.666672c0,-0.555557 0.555555,-1.111115 0.555555,-1.666672c0,-1.111115 0,-1.666656 0,-2.222214c0,-0.555557 -0.212603,-1.153397 0,-1.666672c0.300665,-0.725876 0.555557,-1.111115 0.555557,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0.555555,-0.555557 0.555555,-1.111115c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111107 0,-1.666664c0,-0.555557 0.25489,-1.496361 0.555555,-2.222221c0.212605,-0.513268 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 -0.212599,-1.153404 0,-1.666664c0.300665,-0.725868 0.555555,-1.111115 0.555555,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 -0.162718,-0.718277 -0.555555,-1.111115c-0.392834,-0.39283 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0.212603,-1.153397 0,-1.666664c-0.300665,-0.725868 -0.555555,-1.111115 -0.555555,-1.666672c0,-0.55555 0.555555,-1.111107 1.111111,-1.111107c0.555555,0 1.111111,0 1.666666,0c0.555555,0 1.111111,-0.555557 1.666668,-0.555557c0.555555,0 1.111111,0 1.666666,0c0.555555,0 1.111111,0 1.666666,0c0.555555,0 1.111111,0 1.666668,0c0.555555,0 1.111111,0 1.666666,0c0.555555,0 0.555555,0.555557 0.555555,1.111115c0,0.55555 0,1.111107 0,2.222221c0,1.111107 0.270145,1.568748 0.555557,2.777779c0.25528,1.081383 -0.255283,1.696388 0,2.777779c0.285412,1.209023 0.555553,2.222221 0.555553,3.333328c0,1.111115 0,2.222221 0,3.333336c0,1.111107 0,2.222221 0,2.777779c0,1.111107 0,2.222221 0,3.333328c0,0.555557 0,1.111115 0,2.222229c0,1.111107 0,2.222221 0,2.777771c0,1.111115 0,2.222229 0,2.777779c0,1.111115 0,1.666672 0,2.222221c0,1.111115 0,1.666672 0,2.222229c0,0.55555 0,1.666664 0,2.222221c0,0.55555 0,1.666664 0,2.222221c0,0.555557 0,1.666664 0,2.222221c0,0.555557 0,1.666664 0,2.222221c0,1.111115 0,1.666664 0,2.222221c0,0.555557 0,1.666664 0,2.222221c0,0.555557 0,1.666672 0,2.222221c0,0.555557 0,1.666672 0,2.222221c0,0.555557 -0.270142,1.013199 -0.555553,2.222229c-0.12764,0.540695 0,1.111115 0,1.666656c0,0.555557 0,1.111115 0,1.666672c0,0.555557 0,1.111115 0,1.666672c0,0.555557 0,1.111115 0,1.666656c0,0.555557 0,1.111115 0,1.666672c0,0.555557 0,1.111115 0,1.666672c0,0.555557 0,1.111115 0,1.666656c0,0.555557 0,1.111115 0.555553,1.111115c0.555557,0 1.111111,0 1.666668,0c0.555553,0 1.111111,0 1.666664,0c0.555557,0 1.111115,0 1.666668,0c0.555557,0 1.111111,0 1.666668,0c0.555553,0 0.718273,-0.16272 1.111111,-0.555557c0.392838,-0.392838 0,-1.111099 0,-1.666656c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.555557 0,-1.111099 0,-1.666656c0,-0.555557 0.16272,-1.273834 0.555553,-1.666672c0.392838,-0.392838 0,-1.111115 0,-2.222229c0,-0.555542 0,-1.111099 0,-1.666656c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.555557 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 0,-1.111115 0,-2.222229c0,-0.55555 0,-1.111107 0,-1.666664c0,-1.111107 0,-1.666664 0,-2.222221c0,-0.555557 0.555557,-1.111115 0.555557,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-2.222221c0,-0.555557 0,-1.111107 0,-1.666664c0,-0.555557 0.555557,-1.111115 0.555557,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.555557 0,-1.111107 0,-2.222221c0,-0.555557 0,-1.111107 0,-2.222221c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 0,-1.666672 0,-2.222221c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.555557 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666664c0,-1.111115 0,-1.666672 0,-2.222229c0,-1.111107 0,-1.666664 0,-2.222221c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.666664 0,-2.222221c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 0,-1.111115 0,-2.222225c0,-0.555557 0.425205,-1.19569 0,-2.222221c-0.300667,-0.725872 -0.555557,-1.111111 -0.555557,-2.222225c0,-0.555553 -0.555557,-0.555553 -0.555557,-1.111111c0,-0.555553 0,-1.111111 0,-1.666664c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555557 0,-1.111111 0,-1.666668c0,-1.111111 0,-1.666664 0,-2.222221c0,-1.111111 0,-1.666668 0,-2.222221c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555553 0,-1.111111 0,-1.666664c0,-0.555557 0,-1.111115 0,-2.222225c0,-0.555553 -0.425205,-1.19569 0,-2.222221c0.300667,-0.725868 0.555557,-1.111111 0.555557,-1.666668c0,-1.111111 0,-1.666664 0,-2.222221c0,-1.111111 0,-1.666664 0,-2.222221c0,-0.555557 0.555557,-1.111111 0.555557,-1.666668c0,-0.555553 0,-1.666666 0,-2.222221c0,-0.555555 0,-1.111111 0,-1.666666c0,-0.555555 0.25489,-0.9408 0.555553,-1.666666c0.212601,-0.513268 0,-1.111113 0,-1.666668c0,-0.555555 0,-1.111111 0,-1.666666c0,-0.555555 0,-1.111111 0,-1.666666c0,-0.555557 0,-1.111113 0,-1.666668c0,-0.555555 -0.555553,-1.111111 -1.111111,-1.111111c-0.555557,0 -1.111111,-0.555555 -1.666668,-0.555555c-0.555553,0 -1.111111,-0.555555 -1.666664,-0.555555c-0.555557,0 -1.27383,0.392838 -1.666668,0c-0.392838,-0.392838 -0.555557,-0.555555 -1.111111,-0.555555c-0.555557,0 -1.111111,0 -1.666668,0c-0.555553,0 -0.555553,-0.555555 -1.111111,-0.555555c-0.555553,0 -1.111111,0 -1.111111,0.555555c0,0.555555 0,1.111111 0,1.666666c0,0.555555 0,1.111111 0,1.666666c0,1.111113 -0.25489,2.05191 -0.555555,2.777779c-0.425203,1.026533 0,1.666666 0,3.333334c0,0.555555 0,2.222221 0,2.777777c0,1.666666 0.127642,2.237085 0,2.777777c-0.285412,1.209026 -0.555555,1.666668 -0.555555,2.222225c0,1.111111 0,1.666664 0,2.222221c0,0.555553 0,1.111111 0,1.666664c0,0.555557 0,1.111115 0,1.666668c0,0.555557 0,1.111111 0,1.666668c0,1.111111 0,1.666664 0,2.222221c0,0.555557 0,1.111111 0,1.666668c0,0.555553 0,1.111111 0,1.666664c0,0.555557 0,1.111111 0,1.666668c0,0.555557 0,1.111111 0,1.666668c0,0.555553 0,1.111111 0,1.666664c0,0.555557 0,1.111111 0,1.666668c0,0.555557 0,1.111111 0,2.222221c0,0.555557 0,1.111111 0,1.666668c0,0.555553 0,1.111111 0,1.666668c0,0.555553 0,1.111111 0,1.666664c0,0.555557 0,1.111111 0,1.666668c0,0.555553 0,1.111111 -0.555555,1.111111c-0.555555,0 -1.111113,0 -1.666668,0c-0.555555,0 -1.111111,0 -1.666666,0c-0.555555,0 -1.111111,0 -1.666666,0c-0.555555,0 -0.597845,-0.342957 -1.111113,-0.555557c-0.725866,-0.300663 -1.111111,-0.555553 -1.666666,-0.555553c-0.555555,0 -0.555555,-0.555557 -1.111111,-0.555557c-0.555555,0 -1.273829,0.392838 -1.666666,0c-0.392836,-0.392834 0,-1.666664 0,-2.222221c0,-0.555553 -0.555557,-1.111111 -0.555557,-2.222221c0,-0.555557 0,-1.111111 0,-2.222221c0,-0.555557 0,-1.666668 0,-2.777779c0,-0.555557 0,-1.666668 0,-2.222221c0,-0.555557 0,-1.666668 0,-2.777779c0,-0.555557 0,-1.666668 0,-2.222221c0,-1.111111 0,-1.666668 0,-2.222225c0,-0.555553 0,-1.111111 0,-1.666664c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555553 0,-1.111111 0,-1.666668c0,-0.555553 0,-1.111111 0,-2.222221c0,-0.555553 0,-1.111111 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666668c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555555 0,-1.111111 0,-1.666666c0,-0.555555 0,-1.111111 0,-1.666666c0,-0.555555 0,-1.111111 0,-1.666668c0,-0.555555 0,-1.111111 0,-1.666666c0,-0.555555 0,-1.111111 0,-1.666666c0,-0.555555 -0.555555,-1.111111 -0.555555,-1.666668c0,-0.555555 0,-1.111111 -0.555555,-1.111111c-0.555555,0 -1.111111,0 -1.666666,0c-0.555555,0 -1.708956,0.212603 -2.222222,0c-0.725868,-0.300665 -1.111112,-0.555555 -1.666667,-0.555555c-0.555555,0 -1.111111,0 -1.666666,0c-0.555556,0 -1.111112,0 -1.111112,-0.555555l-0.555555,0l-0.555555,0" id="svg_3" stroke-width="1.5" stroke="#000" fill="none"/>
                                            <path d="m65.833336,24.140625c0,0.555555 0,1.111111 0,1.666666c0,0.555555 -0.555557,1.111113 -1.111115,2.222223c-0.555557,1.111111 -1.111111,2.222221 -1.666664,3.333332c-0.555557,1.111111 -1.381256,2.679863 -1.666668,3.888889c-0.25528,1.081387 -0.072582,2.293736 -0.555557,3.888889c-0.580463,1.917137 -1.385254,2.710308 -1.666664,4.444443c-0.177982,1.096767 -0.172638,2.822365 -0.555557,4.444447c-0.285412,1.209026 -0.844139,2.799301 -1.111111,4.444443c-0.281414,1.734138 -0.8297,3.821419 -1.111111,5.555557c-0.266968,1.645145 -0.8297,3.821419 -1.111111,5.555553c-0.266972,1.645149 -0.275681,3.282104 -0.555557,5.555557c-0.20364,1.654175 -0.274143,3.265869 -0.555553,5c-0.266968,1.645142 0,3.333336 0,3.888885c0,1.666672 0,2.777779 0,3.888893c0,0.555557 -0.25489,1.496353 -0.555557,2.222221c-0.212601,0.513268 -0.270142,1.568748 -0.555553,2.777779c-0.12764,0.540695 0,2.222221 0,3.333336c0,1.111107 -0.270142,2.124306 -0.555557,3.333328c-0.255283,1.08139 0,2.222221 0,2.777779c0,1.111115 0,1.666664 0,2.222221c0,1.111115 0,2.222221 0,3.333336c0,0.555557 0,1.666664 0,2.777779c0,0.555557 -0.212601,1.708954 0,2.222221c0.300667,0.725868 1.111111,1.666664 1.111111,2.222221c0,0.555557 0.555557,1.111115 0.555557,2.222221c0,0.555557 0.270142,1.013199 0.555553,2.222221c0.12764,0.540695 0.855831,1.696396 1.111111,2.777779c0.285412,1.20903 1.366001,2.05191 1.666668,2.777779c0.425205,1.026535 0.651722,1.584846 1.111111,2.222221c0.726364,1.007774 0.810448,1.496353 1.111111,2.222221c0.425205,1.026535 0.651722,1.584854 1.111111,2.222221c0.726368,1.007774 0.89851,2.264503 1.111111,2.777779c0.300667,0.725876 0.940308,1.214447 1.666668,2.222229c0.459393,0.637375 0.555553,1.111099 1.111111,1.666656c0.555557,0.555557 1.366005,0.940811 1.666664,1.666672c0.212601,0.513275 0.555557,1.111115 1.111115,1.666672c0.555557,0.555557 0.718277,1.273819 1.111115,1.666656c0.39283,0.392838 0.898506,0.042282 1.111107,0.555557c0.300667,0.725876 0.718277,0.718277 1.111115,1.111115c0.39283,0.392838 1.111107,0 1.666664,0c0.555557,0 1.111115,0 1.666664,0c0.555557,0 1.111115,0 1.666672,0c0.55555,0 1.273827,0.392838 1.666664,0c0.392838,-0.392838 0.16272,-0.718277 0.555557,-1.111115c0.785667,-0.785675 1.496353,-0.810455 2.222221,-1.111115c1.026527,-0.425201 0.940796,-0.81044 1.666664,-1.111099c0.513268,-0.212601 1.273834,-0.718277 1.666672,-1.111115c0.39283,-0.392838 1.153397,-0.898514 1.666664,-1.111115c0.725868,-0.300659 1.273827,-0.718277 1.666664,-1.111115c0.392838,-0.392838 0.810448,-0.940781 1.111115,-1.666656c0.212601,-0.513275 -0.230118,-0.880997 0.555557,-1.666672c0.39283,-0.392838 1.111107,-0.555557 1.666664,-1.111115c0.555557,-0.55555 0.384743,-1.214447 1.111107,-2.222221c0.459389,-0.637367 1.381256,-1.013191 1.666672,-2.222221c0.12764,-0.540695 0.130356,-0.640137 0.555557,-1.666664c0.300659,-0.725868 0.384743,-1.770004 1.111107,-2.777779c0.459396,-0.637375 0.342957,-1.708954 0.555557,-2.222221c0.300667,-0.725868 0.810448,-1.496353 1.111107,-2.222221c0.212601,-0.513268 0.825699,-1.568756 1.111115,-2.777779c0.12764,-0.540695 -0.425201,-1.195694 0,-2.222221c0.300667,-0.725868 0.555557,-1.666672 0.555557,-2.777779c0,-1.111115 0.555557,-1.666664 0.555557,-2.222221c0,-1.111115 0.825691,-1.568756 1.111107,-2.777779c0.25528,-1.08139 -0.25528,-1.696388 0,-2.777779c0.285416,-1.20903 0.427917,-2.237083 0.555557,-2.777779c0.285416,-1.209023 0.555557,-1.666664 0.555557,-2.777779c0,-0.555557 0.30027,-1.696388 0.55555,-2.777779c0.285416,-1.209023 0.555557,-1.666664 0.555557,-2.222221c0,-1.111107 0.274147,-1.599197 0.555557,-3.333328c0.088989,-0.548386 0,-2.222229 0,-2.777779c0,-1.111115 0.555557,-2.222221 0.555557,-2.777779c0,-1.111115 0,-1.666672 0,-2.222221c0,-1.111115 -0.25528,-1.696396 0,-2.777779c0.285416,-1.20903 0.130356,-1.751251 0.555557,-2.777779c0.300659,-0.725868 0.55555,-1.666664 0.55555,-2.777779c0,-0.555557 0,-1.111115 0,-2.222221c0,-0.555557 0,-1.111115 0,-2.222221c0,-0.555557 0,-1.111115 0,-2.222225c0,-0.555553 0,-1.111111 0,-1.666664c0,-0.555557 0,-1.666668 0,-2.222225c0,-0.555553 0.12764,-1.681526 0,-2.222221c-0.285408,-1.209026 -0.55555,-1.666664 -0.55555,-2.222221c0,-0.555557 -0.555557,-1.111111 -0.555557,-1.666668c0,-0.555553 0.212601,-1.708954 0,-2.222221c-0.300667,-0.725868 -0.342957,-1.708958 -0.555557,-2.222221c-0.300667,-0.725872 -0.810448,-0.940796 -1.111115,-1.666668c-0.212601,-0.513264 -0.16272,-0.718277 -0.55555,-1.111111c-0.785675,-0.785675 -0.555557,-1.111111 -0.555557,-1.666668c0,-0.555553 -0.898514,-1.708954 -1.111115,-2.222221c-0.300659,-0.725864 -0.55555,-1.111111 -1.111107,-1.666664c-0.555557,-0.555557 -1.366005,-0.9408 -1.666672,-1.666668c-0.212601,-0.513268 -0.162712,-1.27383 -0.55555,-1.666668c-0.785675,-0.785675 -0.60994,-1.013569 -1.666672,-1.666664c-0.47258,-0.292068 -1.111107,-0.555557 -1.666664,-1.111115c-0.555557,-0.555553 -1.111115,-1.111111 -1.666664,-1.666664c-0.555557,-0.555559 -1.366005,-0.385244 -1.666672,-1.111113c-0.212601,-0.513266 -0.597839,-0.898508 -1.111107,-1.111111c-0.725868,-0.300665 -1.111115,-0.555555 -1.111115,-1.111111c0,-0.555555 -0.597847,-0.342957 -1.111107,-0.555555c-0.725868,-0.300665 -0.718277,-0.718273 -1.111115,-1.111111c-0.392838,-0.392838 -1.273827,0.392838 -1.666664,0c-0.392838,-0.392838 -0.555557,-1.111113 -1.111115,-1.111113c-0.555557,0 -1.111107,-0.555555 -1.666664,-0.555555c-0.555557,0 -0.555557,-0.555555 -1.111115,-0.555555c-0.55555,0 -0.718269,-0.162718 -1.111107,-0.555555c-0.392838,-0.392838 -0.555557,-0.555555 -1.111115,-0.555555c-0.555557,0 -1.111107,0 -1.666664,0c-0.555557,0 -1.111115,-0.555555 -1.666664,-0.555555c-0.555557,0 -1.111115,0 -1.666672,0c-0.555557,0 -1.111107,0 -1.666664,0c-0.555557,0 -1.111115,0 -1.666664,0c-0.555557,0 -1.111115,0 -1.666672,0l-0.555557,0" id="svg_5" stroke-width="1.5" stroke="#000" fill="none"/>
                                            <path d="m67.5,35.251736c0,0.555557 0,1.111111 0,1.666668c0,0.555553 0,1.111111 0,1.666664c0,0.555557 0.212601,1.708958 0,2.222225c-0.300667,0.725868 -0.555557,1.666664 -0.555557,2.222221c0,1.111111 -0.25489,2.051907 -0.555557,2.777779c-0.425201,1.026531 0.25528,2.251945 0,3.333332c-0.285408,1.209026 -0.30027,2.251945 -0.55555,3.333332c-0.285416,1.20903 -0.825699,1.568748 -1.111115,2.777779c-0.25528,1.081387 -0.25489,1.496353 -0.555557,2.222221c-0.212605,0.513268 0.212601,1.1534 0,1.666668c-0.300663,0.725868 -0.342953,1.708958 -0.555553,2.222221c-0.300663,0.725868 -1.111111,1.666668 -1.111111,2.222221c0,0.555557 -0.555557,1.666672 -0.555557,2.222221c0,0.555557 -0.555553,1.666672 -0.555553,2.222221c0,0.555557 -1.111111,1.111115 -1.111111,2.222229c0,0.55555 -0.555557,1.666664 -0.555557,2.222221c0,0.55555 -0.555553,1.666664 -0.555553,2.777779c0,0.55555 -0.825699,1.568748 -1.111111,2.777771c-0.255283,1.08139 -0.25489,1.496361 -0.555557,2.222229c-0.425201,1.026527 0,1.666664 0,2.222221c0,1.111107 -0.555557,1.666664 -0.555557,2.222221c0,0.555557 0,1.111107 0,1.666664c0,0.555557 -0.25489,1.496353 -0.555553,2.222221c-0.212601,0.513268 0,1.666672 0,2.222221c0,0.555557 0,1.111115 0,1.666672c0,0.55555 0,1.666664 0,2.222221c0,0.555557 0,1.111107 0,1.666664c0,1.111115 0,1.666664 0,2.222221c0,1.111115 0.25489,1.496361 0.555553,2.222221c0.425205,1.026535 0.25489,1.496353 0.555557,2.222221c0.425209,1.026535 0,1.666672 0,2.222229c0,0.55555 0.342957,1.153397 0.555557,1.666664c0.300663,0.725868 0.342953,1.708954 0.555553,2.222221c0.300667,0.725868 0.130356,1.195694 0.555557,2.222221c0.300663,0.725868 0.651718,1.029297 1.111111,1.666664c0.726364,1.007774 0.718273,1.273834 1.111111,1.666672c0.785671,0.785667 0.342953,1.153397 0.555553,1.666664c0.300667,0.725868 0.718277,1.829384 1.111115,2.222221c0.392834,0.392838 0.232693,0.788261 1.111107,1.666672c0.87841,0.87841 1.273834,0.718269 1.666672,1.111107c0.785675,0.785675 0.55555,1.111115 1.111107,1.666664c0.555557,0.555557 0.898514,0.597847 1.111115,1.111115c0.300667,0.725868 1.111107,1.111115 1.666664,1.111115c0.555557,0 0.718277,0.162712 1.111115,0.55555c0.392838,0.392838 0.718269,0.718277 1.111107,1.111115c0.392838,0.392838 0.718277,0.16272 1.111115,0.555557c0.392838,0.392838 1.111107,0.55555 1.666664,0.55555c0.555557,0 0.718277,0.16272 1.111115,0.555557c0.39283,0.392838 1.273827,0.392838 1.666664,0c0.392838,-0.392838 0.16272,-0.718269 0.555557,-1.111107c0.785675,-0.785675 0.810448,-0.940804 1.111107,-1.666672c0.212601,-0.51326 0.555557,-0.55555 0.555557,-1.111107c0,-0.555557 0.427917,-1.125977 0.555557,-1.666672c0.285416,-1.209023 1.111107,-1.666664 1.111107,-2.222221c0,-1.111107 0.555557,-1.666664 0.555557,-2.222221c0,-1.111107 0.427917,-1.681526 0.555557,-2.222221c0.285416,-1.209023 0.983475,-1.681526 1.111115,-2.222221c0.285408,-1.20903 0.685898,-2.306801 1.111107,-3.333336c0.300667,-0.725868 0.855835,-1.696388 1.111115,-2.777779c0.285408,-1.209023 0.55555,-2.222221 1.111107,-3.333328c0.555557,-1.111115 0.855835,-1.696396 1.111115,-2.777779c0.285416,-1.20903 0.825699,-2.124306 1.111107,-3.333336c0.12764,-0.540695 0.810448,-1.496353 1.111115,-2.222221c0.425201,-1.026527 0.300278,-2.251945 0.555557,-3.333336c0.285408,-1.209023 0.825691,-2.124306 1.111107,-3.333328c0.25528,-1.08139 0.810448,-2.05191 1.111115,-2.777779c0.425201,-1.026535 0.25489,-2.05191 0.555557,-2.777779c0.425201,-1.026535 0.55555,-2.222221 0.55555,-3.333336c0,-0.55555 0.825699,-1.568748 1.111115,-2.777779c0.25528,-1.081383 0.25489,-2.051903 0.555557,-2.777771c0.63781,-1.539803 -0.177979,-2.236572 0,-3.333336c0.28141,-1.734131 0.55555,-2.777779 0.55555,-3.888893c0,-1.111107 0.555557,-2.222221 0.555557,-3.333328c0,-0.555557 0.25489,-1.496353 0.555557,-2.222225c0.425201,-1.026531 0,-2.222221 0,-2.777775c0,-0.555557 0,-2.222225 0,-2.777779c0,-0.555557 0.212601,-1.708958 0,-2.222221c-0.300667,-0.725872 -0.342957,-1.708958 -0.555557,-2.222225c-0.300667,-0.725868 -0.555557,-1.666664 -0.555557,-2.222221c0,-0.555553 -0.130341,-0.640133 -0.55555,-1.666668c-0.300667,-0.725868 -1.111115,-0.555553 -1.111115,-1.111111c0,-0.555553 -0.385246,-1.366001 -1.111107,-1.666664c-0.513268,-0.212605 -1.111115,-0.555557 -1.666672,-1.111111c-0.555557,-0.555557 -0.555557,-1.111115 -1.111107,-1.111115c-0.555557,0 -0.898514,-0.597843 -1.111115,-1.111111c-0.300667,-0.725868 -1.111107,-0.555553 -1.666664,-1.111111c-0.555557,-0.555553 -1.029297,-0.651718 -1.666672,-1.111111c-1.007767,-0.72636 -1.496353,-0.810444 -2.222221,-1.111111c-1.026527,-0.425201 -1.751244,-0.130352 -2.777779,-0.555557c-0.725861,-0.300663 -1.029289,-0.651718 -1.666664,-1.111111c-1.007767,-0.72636 -1.273827,-0.718273 -1.666664,-1.111111c-0.392838,-0.392838 -1.708961,-0.342953 -2.222221,-0.555553c-0.725868,-0.300667 -0.940804,-0.810448 -1.666672,-1.111111c-0.51326,-0.212597 -1.111107,0 -1.666664,0c-0.555557,0 -0.718277,-0.16272 -1.111115,-0.555557c-0.39283,-0.392834 -1.111107,0 -1.666664,0l-0.555557,0l-0.55555,0" id="svg_6" stroke-width="1.5" stroke="#000" fill="none"/>
                                            <path d="m113.055557,26.362846c0,0.555557 0.555557,0.555557 0.555557,1.666668c0,0.555555 -0.177979,2.236568 0,3.333332c0.28141,1.734135 0.829697,3.265865 1.111107,5c0.266975,1.645145 0.555557,3.333336 0.555557,5c0,1.666668 0,3.333336 0,5.555557c0,1.666664 0.275681,3.282101 0.555557,5.555553c0.135757,1.102787 0,3.333336 0,5c0,2.777779 0,4.444447 0,6.111111c0,1.666672 0,3.333336 0,5.555557c0,1.111115 0,2.777779 0,4.444443c0,1.111115 0,2.777779 0,3.333336c0,1.111107 0,2.222221 0,3.333336c0,1.111107 0,2.222221 0,3.333328c0,1.666672 -0.274147,2.710312 -0.555557,4.444443c-0.177979,1.096764 0,2.222229 0,3.888893c0,1.111107 -0.555557,2.222221 -0.555557,2.777779c0,1.666664 -0.555557,2.222221 -0.555557,3.333328c0,1.111115 0,2.222229 0,3.333336c0,1.666664 -0.55555,2.777779 -0.55555,4.444443c0,1.666672 -0.274147,2.710312 -0.555557,4.44445c-0.266968,1.645142 0,2.777771 0,3.888885c0,1.111115 0,1.666664 0,2.777779c0,0.555557 -0.555557,1.666664 -0.555557,2.222221c0,1.111115 0,1.666664 0,2.777779c0,1.111107 0,1.666664 0,2.777779c0,1.111107 0,1.666664 0,2.777779c0,1.111107 0,1.666664 0,2.777779c0,0.555557 0,1.111115 0,1.666656c0,0.555557 0,1.111115 0,1.666672c0,0.555557 0,1.111115 0,1.666672c0,0.555557 0,1.111115 0,1.666656c0,0.555557 -0.392838,1.273834 0,1.666672c0.392838,0.392838 0.16272,0.718277 0.555557,1.111115c0.392838,0.392838 0.555557,0.555557 1.111107,0.555557c0.555557,0 1.111115,0 1.666672,0c0.55555,0 1.111107,0 1.666664,0c0.555557,0 1.111115,0 1.666664,0c0.555557,0 1.111115,0 1.666672,0c0.55555,0 1.111107,0 1.666664,0c0.555557,0 1.111115,0 1.111115,-0.555557c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.555557 0,-1.111115 0,-1.666656c0,-0.555557 0.16272,-0.718277 0.55555,-1.111115c0.392838,-0.392838 0,-1.111115 0,-1.666672c0,-0.555557 0,-1.666672 0,-2.222214c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.555557 0.25489,-0.940796 0.555557,-1.666672c0.212601,-0.51326 0,-1.111107 0,-1.666664c0,-1.111107 0,-1.666664 0,-2.222221c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 0,-1.111115 0,-2.222221c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.555557 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.555557 0.555557,-0.555557 0.555557,-1.111107c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0.555557,-0.55555 0.555557,-1.111107c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 -0.425201,-1.195686 0,-2.222221c0.300659,-0.725868 0.55555,-1.111115 0.55555,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 -0.392838,-1.273827 0,-1.666664c0.392838,-0.392838 0.555557,-0.555557 0.555557,-1.111115c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111107 0,-1.666664c0,-0.555557 -0.392838,-1.273834 0,-1.666672c0.392838,-0.392838 0.555557,-0.55555 0.555557,-1.111107c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.555557 0,-1.111107 0,-1.666664c0,-1.111115 0,-1.666664 0,-2.222221c0,-0.555557 -0.392838,-1.273834 0,-1.666672c0.392838,-0.392838 0.555557,-0.55555 0.555557,-1.111107c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.555557 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.555557 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.555557 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 -0.555557,-0.555557 -0.555557,-1.111115c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555553 0.392838,-1.27383 0,-1.666664c-0.392838,-0.392838 -0.555557,-0.555557 -0.555557,-1.111111c0,-0.555557 0,-1.111115 0,-1.666668c0,-0.555557 -0.555557,-1.666668 -0.555557,-2.222221c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555557 0.212601,-1.1534 0,-1.666668c-0.300659,-0.725864 -0.55555,-1.111111 -0.55555,-1.666664c0,-0.555557 -0.25489,-0.940796 -0.555557,-1.666668c-0.212601,-0.513268 0,-1.111111 0,-2.222221c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555553 -0.555557,-1.111111 -0.555557,-1.666668c0,-0.555553 0,-1.111111 0,-1.666664c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555553 0,-1.111111 0,-1.666668c0,-0.555553 0,-1.111111 0,-1.666664c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555553 0,-1.111111 0,-1.666668c0,-0.555553 0,-1.111111 0,-1.666664c0,-0.555557 0,-1.111113 0,-1.666668c0,-0.555555 0,-1.111111 0,-1.666666c0,-0.555555 0,-1.111111 0,-1.666666c0,-0.555557 -0.392838,-1.27383 0,-1.666668c0.392838,-0.392838 0.718277,-0.162718 1.111115,-0.555555c0.39283,-0.392834 0.55555,-0.555555 1.111107,-0.555555c0.555557,0 0.718277,-0.162718 1.111115,-0.555555c0.392838,-0.392838 1.111115,0 1.666672,0c0.555542,0 1.153381,0.212603 1.666656,0c0.725876,-0.300665 1.111115,-0.555555 1.666672,-0.555555c0.555557,0 1.111115,0 1.666672,0c0.555542,0 1.111099,0 1.666656,0c1.111115,0 1.666672,0 2.222229,0c0.555557,0 1.666656,0 2.222214,0c0.555557,0 1.111115,0 1.666672,0c0.555557,0 1.111115,0 1.666672,0c0.555557,0 1.111099,0 1.666656,0c0.555557,0 1.111115,0.555555 1.666672,0.555555c0.555557,0 0.940796,0.810446 1.666672,1.111111c0.513275,0.212603 0.555557,0.555555 1.111099,0.555555c0.555557,0 1.366013,0.385242 1.666672,1.111111c0.212601,0.513268 0.16272,0.718275 0.555557,1.111113c0.392838,0.392838 0.718277,0.718273 1.111115,1.111111c0.392838,0.392838 0.718277,0.162718 1.111115,0.555555c0.392838,0.392838 0,1.111111 0.555542,1.111111c0.555557,0 0.342957,0.597845 0.555557,1.111111c0.300659,0.725872 0.718277,0.718273 1.111115,1.111111c0.392838,0.392838 0.718277,0.718273 1.111115,1.111111c0.392838,0.392838 0.16272,0.718277 0.555557,1.111115c0.392838,0.392834 0.254898,0.940796 0.555557,1.666664c0.212601,0.513268 0.16272,0.718277 0.555557,1.111111c0.392822,0.392826 0.555542,0.555557 0.555542,1.111111c0,0.555557 0.555557,0.555557 0.555557,1.111115c0,0.555553 0.16272,0.718273 0.555557,1.111111c0.392838,0.392834 0,1.111111 0,1.666664c0,0.555557 0,1.111111 0,1.666668c0,0.555557 0.555557,0.555557 0.555557,1.111111c0,0.555557 0,1.111111 0,1.666668c0,0.555553 0,1.111111 0,1.666664c0,0.555557 0,1.111115 0,1.666668c0,0.555557 -0.555557,0.555557 -0.555557,1.111111c0,0.555557 -0.16272,1.27383 -0.555557,1.666668c-0.392838,0.392838 -0.81044,0.385246 -1.111099,1.111111c-0.212601,0.513271 -0.16272,0.718273 -0.555557,1.111111c-0.392838,0.392838 -0.555557,0.555557 -0.555557,1.111111c0,0.555557 -0.385239,0.810448 -1.111115,1.111111c-0.513275,0.212601 -0.597839,0.342957 -1.111115,0.555557c-0.725876,0.300663 -1.111115,1.111111 -1.666656,1.111111c-0.555557,0 -0.555557,0.555557 -1.111115,0.555557c-0.555557,0 -0.718277,0.16272 -1.111115,0.555553c-0.392838,0.392838 -1.273834,-0.392838 -1.666672,0c-0.392838,0.392838 -0.597839,0.34296 -1.111099,0.555557c-0.725876,0.300663 -1.111115,0.555553 -1.666672,0.555553c-0.555557,0 -0.718277,0.16272 -1.111115,0.555557c-0.392838,0.392838 -1.111115,0 -1.666672,0c-0.555542,0 -1.111099,0 -1.666656,0c-0.555557,0 -1.111115,0 -2.222229,0c-0.555557,0 -1.111115,0 -1.666656,0c-0.555557,0 -1.111115,0 -1.666672,0c-0.555557,0 -1.111115,0 -1.666672,0c-0.555557,0 -1.111115,0 -1.666656,0c-0.555557,0 -1.111115,0 -1.666672,0c-0.555557,0 -1.111115,0 -1.666672,0c-0.555557,0 -1.111115,0 -1.666656,0c-0.555557,0 -1.111115,0 -1.666672,0c-0.555557,0 -1.111115,0 -1.666672,0c-0.55555,0 -1.111107,0 -1.666664,0c-0.555557,0 -1.111107,0 -1.666664,0c-0.555557,0 -1.111115,0 -1.666672,0c-0.55555,0 -1.111107,0 -1.666664,0c-0.555557,0 -1.111107,0 -1.666664,0c-0.555557,0 -1.111115,0 -1.111115,-0.555557c0,-0.555553 -0.555557,-0.555553 -0.555557,-1.111111c0,-0.555553 0,-1.111111 0,-1.666668c0,-0.555553 -0.55555,-0.555553 -0.55555,-1.111111c0,-0.555553 0,-1.111111 0,-1.666664c0,-0.555557 -0.555557,-1.111111 -0.555557,-1.666668c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555553 -0.25489,-0.940796 -0.555557,-1.666664c-0.212601,-0.513268 0,-1.111111 0,-1.666668c0,-0.555557 -0.555557,-0.555557 -0.555557,-1.111111c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555553 0.392838,-1.27383 0,-1.666664c-0.39283,-0.392834 -0.55555,-0.555557 -0.55555,-1.111115c0,-0.555553 0.392838,-1.27383 0,-1.666664c-0.392838,-0.392838 -0.555557,-0.555557 -0.555557,-1.111111c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555553 -0.555557,-1.111111 -0.555557,-1.666664c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555553 0,-1.111111 0,-1.666666c0,-0.555555 0,-1.111111 0,-1.666666c0,-0.555555 0.555557,-0.555555 0.555557,-1.111111c0,-0.555555 0.555557,-1.111111 0.555557,-1.666668c0,-0.555555 0.162712,-0.718273 0.55555,-1.111111c0.392838,-0.392838 0.16272,-0.718273 0.555557,-1.111111c0.392838,-0.392838 0.718277,-0.162718 1.111115,-0.555555c0.39283,-0.392834 1.111107,0 1.666664,0c0.555557,0 1.111115,0 1.666664,0c0.555557,0 1.111115,0 1.666672,0c0.55555,0 1.111107,0 1.666664,0c1.111115,0 1.666664,0 2.222221,0c0.555557,0 1.111115,0 1.666664,0c0.555557,0 1.111115,0 1.666672,0c0.555557,0 0.555557,0.555555 1.111115,0.555555c0.555557,0 0.555557,0.555555 1.666656,0.555555c0.555557,0 1.111115,0.555555 1.666672,0.555555c0.555557,0 1.111115,0.555555 1.666672,0.555555c0.555557,0 1.111099,0 1.666656,0.555555c0.555557,0.555557 1.153397,0.342955 1.666672,0.555557c0.725876,0.300665 1.153397,0.342953 1.666672,0.555555c0.725876,0.300665 1.273819,0.718273 1.666656,1.111111c0.392838,0.392838 0.718277,0.162718 1.111115,0.555555c0.392838,0.392838 0.718277,0.162718 1.111115,0.555555c0.392838,0.392838 1.366013,0.385242 1.666672,1.111111c0.212601,0.513266 0.162704,0.718275 0.555542,1.111113c0.392838,0.392838 0.880997,-0.230124 1.666672,0.555553c0.785675,0.785675 0.47374,1.207275 1.111115,1.666668c1.007782,0.726364 1.153412,0.898506 1.666672,1.111111c0.725861,0.300667 0.718262,0.718273 1.111099,1.111111c0.392838,0.392838 0.555557,0.555557 0.555557,1.111111c0,0.555557 0.16272,0.718273 0.555557,1.111111c0.392838,0.392838 0,1.111115 0,1.666668c0,0.555557 0.212601,1.1534 0,1.666668c-0.300659,0.725868 -0.718277,0.718273 -1.111115,1.111111c-0.392838,0.392834 -0.16272,0.718273 -0.555557,1.111111c-0.392822,0.392826 -0.162704,0.718277 -0.555542,1.111111c-0.392838,0.392838 -1.273834,0.16272 -1.666672,0.555557c-0.392838,0.392834 -0.597839,0.342953 -1.111115,0.555553c-0.725876,0.300667 -0.718277,0.718277 -1.111115,1.111111c-0.392838,0.392838 -1.013184,0.270145 -2.222214,0.555557c-0.540695,0.12764 -1.153397,-0.212601 -1.666672,0c-0.725876,0.300663 -1.111115,0.555553 -1.666672,0.555553c-0.555542,0 -0.718262,0.16272 -1.111099,0.555557c-0.392838,0.392838 -0.718277,0.16272 -1.111115,0.555557c-0.392838,0.392838 -1.111115,0 -1.666672,0c-0.555557,0 -1.111115,0 -1.666656,0c-0.555557,0 -1.111115,0 -1.666672,0c-0.555557,0 -0.718277,0.16272 -1.111115,0.555553c-0.392838,0.392838 -1.111115,0 -1.666672,0c-0.555542,0 -1.111099,0 -1.666656,0l-0.555557,0l-0.555557,0" id="svg_10" stroke-width="1.5" stroke="#000" fill="none"/>
                                            <path d="m165.277771,23.58507c0,0.555555 0.254898,0.940798 0.555557,1.666666c0.425201,1.026531 0.270142,2.124306 0.555557,3.333334c0.25528,1.081387 0.377579,2.792124 0.555557,3.888887c0.281418,1.734138 0.555557,2.777779 1.111115,4.444447c0.555557,1.666664 0.829697,2.710308 1.111115,4.444443c0.266968,1.645145 0.351929,3.901375 0.555557,5.555557c0.279861,2.273449 0.555542,4.444443 0.555542,6.111111c0,2.222221 0.288589,3.910412 0.555557,5.555553c0.281418,1.734138 0.555557,3.333336 0.555557,4.444447c0,1.666668 0,2.777775 0,4.444447c0,1.666664 0,2.777779 0,4.444443c0,1.111107 0,2.777779 0,4.444443c0,1.111115 0.555557,2.777779 0.555557,4.444443c0,1.111115 0,2.777779 0,3.888893c0,1.111107 0,1.666664 0,3.333328c0,1.111115 -0.177979,2.23658 0,3.333336c0.281418,1.734131 0.555557,2.777779 0.555557,3.888893c0,1.666664 0,2.222221 0,3.888885c0,0.555557 0,1.111115 0,2.222221c0,1.111115 0.555557,2.222221 0.555557,3.333336c0,0.555557 0,1.666664 0,2.777779c0,0.55555 0.555557,1.111107 0.555557,2.222221c0,0.555557 0,1.666664 0,2.222221c0,1.111107 0,1.666664 0,2.222221c0,1.111115 0,1.666664 0,2.222221c0,1.111115 0,1.666664 0,2.222221c0,0.555557 0,1.111115 0,1.666672c0,0.55555 0,1.666664 0,2.222221c0,0.55555 0,1.111107 0,1.666664c0,0.555557 -0.16272,0.718277 -0.555557,1.111115c-0.392838,0.39283 0,1.666664 0,2.222221c0,0.55555 -0.254898,0.940788 -0.555557,1.666664c-0.212601,0.513275 0,1.111115 0,1.666672c0,0.555557 -0.254898,0.940781 -0.555557,1.666656c-0.212601,0.513275 0,1.111115 0,1.666672c0,0.555557 -0.555557,0.555557 -0.555557,1.111115c0,0.555557 0.16272,0.718277 0.555557,1.111115c0.392838,0.392838 1.111115,0 1.666672,0c0.555557,0 1.111115,0.555542 1.666656,0.555542c0.555557,0 1.111115,0 1.666672,0c0.555557,0 1.111115,0 1.666672,0c0.555557,0 0.555557,-0.555542 0.555557,-1.666656c0,-0.555557 0,-1.111115 0,-2.222229c0,-0.555557 0.254898,-0.940796 0.555557,-1.666656c0.212601,-0.51326 -0.212601,-1.708954 0,-2.222229c0.300659,-0.725861 0.555542,-1.111115 0.555542,-1.666664c0,-1.111115 0,-1.666672 0,-2.222221c0,-1.111115 0,-1.666672 0,-2.222229c0,-0.55555 0,-1.666664 0,-2.222221c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0.555557,-1.111115 0.555557,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 -0.212601,-1.153397 0,-1.666664c0.300659,-0.725868 0.555557,-1.111115 0.555557,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0.16272,-0.718269 0.555557,-1.111107c0.392838,-0.392838 0,-1.111115 0,-1.666672c0,-0.55555 -0.212601,-1.153397 0,-1.666664c0.300659,-0.725868 0.555557,-1.111107 0.555557,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.666672 0,-2.222221c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0.16272,-0.718269 0.555557,-1.111107c0.392838,-0.392838 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666668c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555553 -0.392838,-1.27383 0,-1.666664c0.392838,-0.392838 1.708954,-0.212597 2.222214,0c0.725876,0.300663 1.111115,0.555553 1.666672,0.555553c0.555557,0 1.111115,0 1.666672,0c0.555557,0 1.111115,0 1.666656,0c1.111115,0 1.666672,0 2.222229,0c0.555557,0 1.111115,0 1.666672,0c0.555557,0 1.111099,0 1.666656,0c0.555557,0 1.111115,0 1.666672,0c1.111115,0 1.666672,0 2.222229,0c0.555542,0 1.111099,0 1.666656,0c0.555557,0 1.273834,-0.16272 1.666672,-0.555553c0.392838,-0.392838 0.597839,-0.342957 1.111115,-0.555557c0.725876,-0.300667 1.111099,-0.555557 1.666656,-1.111111c0.555557,-0.555557 1.273834,-0.718273 1.666672,-1.111111c0.392838,-0.392838 0.555557,-0.555557 1.111115,-1.111111c0.555557,-0.555557 1.013565,-0.609943 1.666656,-1.666668c0.292068,-0.472588 0.555557,-1.111111 1.111115,-1.666668c0.555557,-0.555553 1.207275,-1.029293 1.666672,-1.666664c0.726364,-1.007771 1.111115,-1.666664 1.666672,-2.222225c0.555542,-0.55555 0.898499,-1.708954 1.111099,-2.222221c0.300659,-0.725868 1.111115,-1.111111 1.111115,-1.666664c0,-1.111115 0.555557,-1.111115 0.555557,-1.666668c0,-0.555557 0.254898,-0.940796 0.555557,-1.666668c0.212601,-0.513264 0,-1.111111 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666668c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555553 0,-1.111111 0,-1.666664c0,-1.111115 0,-1.666668 0,-2.222225c0,-0.555553 0,-1.111111 0,-1.666666c0,-1.111111 0.212601,-1.708956 0,-2.222221c-0.300659,-0.725868 -0.16272,-1.273829 -0.555557,-1.666666c-0.392838,-0.392838 -1.273834,-0.16272 -1.666672,-0.555557c-0.392838,-0.392838 -0.042297,-0.898504 -0.555557,-1.111111c-0.725861,-0.300665 -0.940781,-0.810446 -1.666656,-1.111111c-0.513275,-0.212603 -0.880997,-0.325434 -1.666672,-1.111111c-0.392838,-0.392838 -0.718277,-0.162718 -1.111115,-0.555555c-0.392838,-0.392838 -1.273819,-0.162718 -1.666656,-0.555555c-0.392838,-0.392838 -0.16272,-0.718275 -0.555557,-1.111113c-0.392838,-0.392838 -0.940796,-0.25489 -1.666672,-0.555555c-1.026535,-0.425203 -2.237076,-0.427916 -2.777771,-0.555555c-1.20903,-0.285412 -2.222229,-1.111111 -2.777786,-1.111111c-1.111115,0 -1.666656,-0.555555 -2.222214,-0.555555c-1.111115,0 -1.666672,0 -2.222229,0c-0.555557,0 -1.111115,-0.555555 -1.666672,-0.555555c-1.111099,0 -1.496338,-0.25489 -2.222214,-0.555555c-0.513275,-0.212603 -1.111115,0 -1.666672,0c-0.555557,0 -1.111115,0 -1.666656,0c-0.555557,0 -1.111115,0 -1.666672,0c-0.555557,0 -1.666672,-0.555557 -2.222229,-0.555557c-0.555557,0 -1.195679,0.425203 -2.222214,0c-0.725876,-0.300663 -1.666672,-0.555554 -2.222229,-0.555554c-0.555557,0 -1.111115,0 -1.666656,0c-0.555557,0 -1.111115,0 -1.666672,0c-0.555557,0 -1.111115,0 -1.666672,0c-0.555557,0 -1.111115,0 -1.666656,0c-0.555557,0 -1.708954,-0.212602 -2.222229,0c-0.725876,0.300664 -1.111115,0.555554 -1.666672,0.555554c-0.555557,0 -0.555557,0.555557 -1.111099,0.555557c-0.555557,0 -0.718277,0.162718 -1.111115,0.555555c-0.392838,0.392838 -0.718277,0.162718 -1.111115,0.555555c-0.392838,0.392838 -0.342957,0.597845 -0.555557,1.111111c-0.300659,0.725868 -1.111115,0.555555 -1.111115,1.111111c0,0.555555 -0.555557,0.555555 -0.555557,1.111111c0,0.555557 -0.555542,0.555557 -0.555542,1.111113c0,0.555555 0,1.111111 0,1.666666c0,0.555555 -0.392838,1.273829 0,1.666666c0.392822,0.392828 0.555542,0.555555 0.555542,1.111113c0,0.555555 0,1.111111 0,1.666666c0,0.555555 0.555557,0.555555 0.555557,1.111111c0,0.555555 -0.392838,1.273829 0,1.666666c0.392838,0.392838 0.555557,0.555557 0.555557,1.111111c0,0.555557 0,1.111111 0,1.666668c0,0.555557 0,1.111111 0,1.666668c0,0.555553 0,1.111111 0,1.666664c0,0.555557 0.555557,0.555557 0.555557,1.111111c0,0.555557 0,1.111115 0,1.666668c0,0.555557 -0.212601,1.1534 0,1.666668c0.300659,0.725868 0.555557,1.111111 0.555557,1.666664c0,0.555557 -0.392838,1.273834 0,1.666668c0.392838,0.392838 0.555557,0.555557 0.555557,1.111111c0,0.555557 0.16272,0.718277 0.555557,1.111111c0.392838,0.392838 0.555557,0.555557 0.555557,1.111111c0,0.555557 0.16272,0.718277 0.555557,1.111115c0.392822,0.392826 0.385223,0.810444 1.111099,1.111111c0.513275,0.212601 0.597839,0.342953 1.111115,0.555553c0.725876,0.300667 1.153397,0.89851 1.666672,1.111111c0.725876,0.300667 1.153397,0.898514 1.666656,1.111111c0.725876,0.300667 1.111115,0.555557 2.222229,0.555557c0.555557,0 1.111115,0.555557 1.666672,0.555557c1.111099,0 1.666656,0 2.222214,0c0.555557,0 1.111115,0 1.666672,0c0.555557,0 1.666672,0 2.222214,0c0.555557,0 1.111115,0 1.666672,0c0.555557,0 1.111115,0 1.666672,0c0.555557,0 0.555557,-0.555557 1.111115,-0.555557c0.555542,0 0.718262,-0.16272 1.111099,-0.555557c0.392838,-0.392838 0.718277,-0.16272 1.111115,-0.555553c0.392838,-0.392838 1.013199,-0.270145 2.222229,-0.555557c0.540695,-0.12764 1.111099,0 2.222214,0c0.555557,0 1.111115,0 1.666672,0c0.555557,0 0.718277,-0.16272 1.111115,-0.555553c0.392838,-0.392838 1.111099,0 1.666656,0c0.555557,0 0.555557,-0.555557 1.111115,-0.555557c0.555557,0 0.718277,-0.16272 1.111115,-0.555553c0.392838,-0.392838 0.718277,-0.16272 1.111115,-0.555557c0.392838,-0.392834 0.16272,-0.718273 0.555557,-1.111111c0.392822,-0.392826 1.111099,0 1.111099,-0.555557c0,-0.555553 0.555557,-0.555553 0.555557,-1.111111c0,-0.555553 0.555557,-0.555553 0.555557,-1.666664c0,-0.555557 -0.12764,-1.125973 0,-1.666668c0.285416,-1.20903 0.718277,-1.27383 1.111115,-1.666668c0.392838,-0.392834 0,-1.111111 0,-1.666664c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555553 0.212601,-1.1534 0,-1.666664c-0.300659,-0.725872 -0.718277,-0.718273 -1.111115,-1.111111c-0.392838,-0.392838 -0.342957,-0.597847 -0.555557,-1.111115c-0.300659,-0.725868 -0.898514,-0.597843 -1.111115,-1.111111c-0.300659,-0.725859 -0.718262,-0.718273 -1.111099,-1.111111c-0.392838,-0.392838 -0.880997,0.230122 -1.666672,-0.555555c-0.785675,-0.785673 -0.16272,-1.273829 -0.555557,-1.666666c-0.392838,-0.392838 -0.940796,-0.25489 -1.666672,-0.555555c-0.51326,-0.212597 -0.718262,-0.162718 -1.111099,-0.555555c-0.392838,-0.392838 -0.555557,-0.555555 -1.111115,-0.555555c-0.555557,0 -0.555557,-0.555555 -1.111115,-0.555555c-0.555557,0 -1.111115,-0.555557 -1.666672,-0.555557c-0.555542,0 -0.555542,-0.555555 -1.111099,-0.555555c-0.555557,0 -0.555557,-0.555555 -1.111115,-0.555555c-0.555557,0 -0.940796,-0.25489 -1.666672,-0.555555c-0.513275,-0.212603 -1.153397,0.212597 -1.666656,0c-0.725876,-0.300665 -1.111115,-0.555555 -1.666672,-0.555555c-0.555557,0 -1.111115,0 -1.666672,0c-0.555557,0 -1.111115,0 -1.666656,0c-0.555557,0 -1.111115,0 -1.666672,0c-0.555557,0 -1.111115,0 -1.666672,0c-0.555557,0 -1.111115,0 -1.666656,0c-0.555557,0 -1.273834,-0.392838 -1.666672,0c-0.392838,0.392838 -0.555557,0.555555 -0.555557,1.111111c0,0.555555 0,1.111111 0,1.666668c0,0.555555 0,1.111111 0,1.666666c0,0.555555 0,1.111111 0,1.666666c0,0.555555 0.254898,0.940798 0.555557,1.666668c0.212601,0.513264 0,1.111111 0,1.666664c0,0.555557 0.16272,0.718277 0.555557,1.111115c0.392838,0.392834 0,1.111111 0,1.666664c0,0.555557 0.16272,0.718273 0.555557,1.111111c0.392838,0.392838 0,1.111111 0,1.666668c0,0.555557 0.555557,1.111111 0.555557,1.666668c0,0.555553 0.555542,1.111111 0.555542,1.666664c0,0.555557 -0.212601,1.1534 0,1.666668c0.300659,0.725872 0.555557,1.111111 0.555557,1.666668c0,0.555553 0.16272,0.718273 0.555557,1.111111c0.392838,0.392834 0,1.111111 0,1.666664c0,0.555557 0.555557,1.111115 0.555557,1.666668c0,0.555557 0.16272,0.718273 0.555557,1.111111c0.392838,0.392838 0,1.111111 0,1.666668c0,0.555553 -0.392838,1.27383 0,1.666668c0.392838,0.392838 0.555557,0.555553 0.555557,1.111111c0,0.555553 0,1.111111 0,1.666664l0,0.555557" id="svg_12" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
                                            <path d="m234.722229,23.029514c0,0.555555 0,3.333332 0,3.888889c0,1.111111 0,1.666666 0,2.777777c0,1.111111 0,2.222223 0,3.888887c0,1.666668 0.555542,2.777779 0.555542,4.444447c0,1.666668 0,2.777779 0,4.444443c0,2.222225 0,3.888889 0,5c0,2.222225 -0.274139,3.821423 -0.555542,5.555557c-0.177979,1.096764 0.266968,2.799301 0,4.444443c-0.281418,1.734138 -0.377579,3.347683 -0.555557,4.444447c-0.281418,1.734135 -0.377579,3.347687 -0.555557,4.444443c-0.281418,1.734131 -0.172638,2.822365 -0.555557,4.444443c-0.285416,1.20903 -0.555557,2.222221 -0.555557,3.333336c0,1.111115 -0.555557,1.666664 -0.555557,3.333336c0,1.111107 -0.555557,2.222221 -0.555557,3.333328c0,0.555557 -0.825699,1.568756 -1.111115,2.777779c-0.25528,1.08139 0.25528,2.251945 0,3.333336c-0.2854,1.209023 -0.555542,2.222221 -0.555542,2.777779c0,1.111107 -0.555557,2.222221 -0.555557,3.333328c0,1.111115 -0.300278,2.251953 -0.555557,3.333336c-0.285416,1.20903 -0.555557,2.222221 -0.555557,2.777779c0,1.666664 -0.274139,2.154755 -0.555557,3.888885c-0.088989,0.548386 0,1.666672 0,2.777779c0,0.555557 0,1.666672 0,2.222221c0,0.555557 -0.555557,1.111115 -0.555557,1.666672c0,0.555557 0,1.111107 0,2.222221c0,0.555557 0,1.111107 0,2.222221c0,0.555557 0,1.111115 0,1.666664c0,1.111115 0,1.666672 0,2.222221c0,1.111115 0,1.666672 0,2.222229c0,0.55555 0,1.111107 0,1.666664c0,0.555557 0,1.111107 0,1.666664c0,0.555557 0,1.111115 0,2.222221c0,0.555557 0,1.111115 0,2.222221c0,0.555557 0,1.111115 0,1.666672c0,0.555557 0,1.111115 0,1.666672c0,0.555542 0,1.111099 0,1.666656c0,0.555557 0,1.111115 0,1.666672c0,0.555557 0.342957,0.597839 0.555557,1.111115c0.300659,0.725876 0.940796,1.365997 1.666672,1.666656c0.513275,0.212601 1.111099,0 1.666656,0c0.555557,0 1.111115,0.555557 1.666672,0.555557c0.555557,0 1.111115,0 1.666672,0c0.555557,0 1.111099,0.555557 1.666656,0.555557c0.555557,0 1.666672,0 2.222229,0c0.555557,0 1.111115,0 1.666672,0c0.555542,0 1.111099,0 1.666656,0c0.555557,0 1.273834,0.392838 1.666672,0c0.392838,-0.392838 0,-1.111115 0,-1.666672c0,-0.555542 0,-1.111099 0,-1.666656c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.555557 0,-1.666672 0,-2.222214c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-1.111107 0,-1.666664 0,-2.222221c0,-1.111115 0,-1.666664 0,-2.777779c0,-1.111107 0,-1.666664 0,-2.777779c0,-1.111107 0,-2.222221 0,-2.777779c0,-1.111107 0,-2.222221 0,-2.777779c0,-1.111107 0,-2.222221 0,-2.777771c0,-1.111115 0,-1.666672 0,-2.777779c0,-0.555557 0,-1.666672 0,-2.777779c0,-1.111115 0,-2.222221 0,-3.333336c0,-1.111107 0,-2.222221 0,-3.333336c0,-1.111107 0,-2.222221 0,-3.333328c0,-0.555557 0,-1.666672 0,-2.777779c0,-1.111115 0,-2.222221 0,-3.333336c0,-1.111107 0.555557,-2.222221 0.555557,-2.777779c0,-1.111107 -0.12764,-2.237083 0,-2.777779c0.285416,-1.209023 0.555557,-2.222221 0.555557,-3.333328c0,-1.111115 -0.25528,-2.251945 0,-3.333336c0.285416,-1.209023 0.555557,-2.222221 0.555557,-3.333336c0,-0.55555 0.270142,-1.568748 0.555542,-2.777771c0.12764,-0.540695 0.254898,-1.496361 0.555557,-2.222229c0.425201,-1.026527 -0.12764,-2.237083 0,-2.777771c0.285416,-1.20903 0.810455,-2.05191 1.111115,-2.777782c0.425201,-1.026531 0.274139,-2.154751 0.555557,-3.888889c0.088989,-0.548378 0.555557,-2.222221 0.555557,-2.777775c0,-1.111111 0.300278,-2.251949 0.555557,-3.333336c0.285416,-1.20903 0.555557,-2.222221 0.555557,-2.777775c0,-1.111115 0.270142,-2.124306 0.555557,-3.333336c0.12764,-0.540691 0,-1.666664 0,-2.222221c0,-1.111111 0,-1.666668 0,-3.333332c0,-0.555557 0,-1.111111 0,-2.222225c0,-1.111111 0,-1.666664 0,-2.222221c0,-0.555553 0,-1.666664 0,-2.222221c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555553 0,-1.111111 0,-1.666666c0,-0.555555 -0.254898,-0.940798 -0.555557,-1.666666c-0.212601,-0.513266 -0.555557,-0.555555 -0.555557,-1.111111c0,-0.555555 -0.555557,-0.555555 -0.555557,-1.111111c0,-0.555557 -0.16272,-0.718275 -0.555557,-1.111113c-0.785675,-0.785677 -1.708969,0.212606 -2.222229,0c-0.725861,-0.300665 -1.666656,-1.111111 -2.222214,-1.111111c-0.555557,0 -1.708954,0.212603 -2.222229,0c-0.725876,-0.300665 -1.666656,-0.555555 -2.222214,-0.555555c-0.555557,0 -1.111115,0 -1.666672,0c-0.555557,0 -1.111115,0 -1.666672,0l-0.555542,0l-0.555557,0l-0.555557,0" id="svg_13" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
                                            <path d="m268.055542,27.473959c0,0.555555 0,1.111111 0,1.666666c0,0.555555 0,1.111111 0,2.222221c0,1.111111 0,2.222221 0,3.333336c0,1.111111 0,2.222221 0,3.333332c0,1.666668 0,2.777779 0,3.888889c0,1.111111 -0.270142,2.679867 -0.555542,3.888889c-0.25528,1.08139 0,2.222221 0,3.333332c0,0.555557 0,2.222221 0,2.777779c0,1.111111 0,2.777779 0,3.888889c0,1.111111 -0.254883,2.051914 -0.555542,2.777775c-0.637787,1.539803 -0.274139,2.154751 -0.555573,3.888889c-0.088989,0.548382 0,2.222225 0,3.333332c0,1.111115 0.25528,2.251945 0,3.333336c-0.2854,1.20903 -0.555542,2.222221 -0.555542,3.333336c0,1.111107 0.382935,2.266808 0,3.888885c-0.285431,1.209038 -0.555573,2.777779 -0.555573,3.888893c0,1.111107 0,2.222221 0,3.888885c0,1.111115 0,2.222221 0,3.333336c0,1.111107 0,2.777779 0,3.888885c0,1.111115 -0.555542,2.777779 -0.555542,3.888893c0,1.111107 0.382935,2.266808 0,3.888885c-0.285431,1.209038 -0.555573,2.777779 -0.555573,3.888885c0,1.666672 0,3.333336 0,3.888893c0,1.666664 0,2.222221 0,3.333336c0,1.111107 0,2.222221 0,2.777771c0,1.111115 0,2.222229 0,2.777779c0,0.555557 0,1.666672 0,2.222221c0,0.555557 0,1.666672 0,2.222229c0,0.55555 0,1.111107 0,1.666664c0,0.555557 0,1.111107 0,1.666664c0,0.555557 0,1.111115 0,1.666672c0,0.55555 0,1.111107 0,1.666664c0,0.555557 0,1.111107 0,1.666664c0,0.555557 0,1.111115 0,1.666672c0,0.555557 0,1.111115 0,1.666656c0,0.555557 0.555573,0.555557 0.555573,1.111115c0,0.555557 0,1.111115 0,1.666672c0,0.555557 0.555542,0.555557 0.555542,1.111115c0,0.555557 -0.392853,1.273819 0,1.666656c0.392853,0.392853 1.111115,0 1.666687,0c0.555542,0 1.111084,0 1.666656,0c0.555542,0 1.111115,0 1.666656,0c0.555573,0 1.111115,0 1.666687,0c0.555542,0 0.555542,-0.555557 1.111084,-0.555557c0.555573,0 0.555573,-0.555542 0.555573,-1.666656c0,-0.555557 0.16272,-0.718292 0.555542,-1.111115c0.392853,-0.392838 0.254883,-0.940796 0.555573,-1.666672c0.212616,-0.51326 0.162689,-1.273819 0.555542,-1.666656c0.392853,-0.392853 0.810455,-0.385254 1.111115,-1.111115c0.212585,-0.513275 0.342957,-1.153397 0.555573,-1.666672c0.300659,-0.725853 0.718262,-0.718277 1.111084,-1.111107c0.785675,-0.785675 0.16272,-1.829384 0.555573,-2.222221c0.392822,-0.39283 0.162689,-0.718277 0.555542,-1.111115c0.392853,-0.392853 0.427948,-0.570419 0.555573,-1.111107c0.2854,-1.20903 1.111115,-1.111115 1.111115,-1.666672c0,-0.55555 0.16272,-0.718277 0.555542,-1.111107c0.392853,-0.392838 0.254883,-0.940796 0.555573,-1.666672c0.212616,-0.51326 0.810425,-1.496361 1.111084,-2.222221c0.425201,-1.026535 0.810455,-1.496361 1.111115,-2.222221c0.212585,-0.513268 0.898499,-0.597847 1.111115,-1.111107c0.30069,-0.725876 0.810455,-0.940811 1.111115,-1.666672c0.425201,-1.026535 0.810455,-1.496361 1.111115,-2.222221c0.212585,-0.513268 0.254883,-0.940804 0.555542,-1.666664c0.212585,-0.513268 0.555573,-1.111115 0.555573,-1.666664c0,-0.555557 0.98349,-1.125977 1.111115,-1.666672c0.2854,-1.209023 0.810425,-1.496346 1.111115,-2.222221c0.212616,-0.513268 0.810425,-0.940788 1.111115,-1.666664c0.212616,-0.513268 0.254883,-0.940811 0.555542,-1.666672c0.212585,-0.51326 0.555542,-1.111107 0.555542,-1.666664c0,-0.555557 0.254883,-0.940788 0.555573,-1.666664c0.212616,-0.513268 0.555542,-1.111115 0.555542,-1.666672c0,-0.55555 0.555573,-1.666664 0.555573,-2.222221c0,-0.55555 0.342926,-1.708954 0.555542,-2.222221c0.30069,-0.725876 0.651733,-1.584854 1.111115,-2.222221c0.726379,-1.007774 0.342987,-1.708954 0.555573,-2.222221c0.300659,-0.725861 0.342957,-1.708954 0.555542,-2.222221c0.300659,-0.725861 0.342926,-1.153404 0.555542,-1.666664c0.30069,-0.725876 0.718292,-0.718285 1.111115,-1.111115c0.785675,-0.785675 0.254883,-1.496346 0.555573,-2.222221c0.212616,-0.513268 0.254883,-0.940811 0.555542,-1.666664c0.212616,-0.513268 0.342987,-1.153404 0.555573,-1.666672c0.300659,-0.725861 0.342926,-1.153397 0.555542,-1.666664c0.30069,-0.725876 0.16275,-1.273834 0.555573,-1.666664c0.392822,-0.39283 0.555542,-0.555565 1.111084,-1.111115c0.555573,-0.555565 0.16275,-1.273834 0.555573,-1.666664c0.392822,-0.39283 0.162689,-1.273834 0.555542,-1.666672c0.392853,-0.392853 0.342987,-0.597839 0.555573,-1.111107c0.300659,-0.725864 0.718292,-1.273834 1.111115,-1.666668c0.392822,-0.392826 0.555542,-0.555557 0.555542,-1.111111c0,-0.555557 0.342987,-0.597843 0.555573,-1.111111c0.300659,-0.725864 1.111084,-0.555557 1.111084,-1.111111c0,-0.555557 0.555573,-1.111115 0.555573,-1.666668c0,-0.555557 0.342926,-1.1534 0.555542,-1.666668c0.30069,-0.725876 1.111115,-1.111111 1.111115,-1.666664c0,-0.555557 0.555573,-0.555557 0.555573,-1.111115c0,-0.555553 0.342926,-1.1534 0.555542,-1.666664c0.30069,-0.72588 1.111115,-0.555557 1.111115,-1.111111c0,-0.555557 0.162689,-1.27383 0.555542,-1.666668c0.392853,-0.392849 0.16275,-0.718277 0.555573,-1.111111c0.392822,-0.392826 0.555542,-0.555557 0.555542,-1.111111c0,-0.555557 0.555573,-0.555557 0.555573,0c0,0.555553 0,1.111111 0,1.666664c0,0.555557 0,1.111115 0,1.666668c0,0.555557 0,1.111111 0,1.666668c0,0.555553 0,1.111111 0,1.666664c0,0.555557 0,1.111115 0,1.666668c0,0.555557 0,1.111111 0,1.666668c0,0.555553 -0.555573,1.111111 -0.555573,1.666664c0,1.111115 0,1.666668 0,2.222225c0,0.555553 0,1.111111 0,1.666664c0,0.555557 0,1.111111 0,1.666668c0,0.555557 0,1.111115 0,1.666664c0,1.111115 0,1.666672 0,2.222221c0,1.111115 0,2.222229 0,2.777779c0,1.111115 0,1.666672 0,2.777779c0,0.555557 0,1.666672 0,2.222221c0,1.111115 0.425201,1.751244 0,2.777779c-0.300659,0.725861 -0.555542,1.666672 -0.555542,2.777779c0,0.555557 0,1.111115 0,2.222221c0,0.555557 -0.254883,1.496346 -0.555573,2.222221c-0.212616,0.513268 0,1.666672 0,2.777779c0,1.111115 0,1.666672 0,2.222221c0,1.111115 -0.130341,2.306793 -0.555542,3.333336c-0.300659,0.725861 -0.555542,1.666664 -0.555542,2.777779c0,0.555557 -0.254883,2.051903 -0.555573,2.777779c-0.637817,1.539795 0,2.777779 0,3.888885c0,0.555557 0,1.111115 0,2.222221c0,1.111115 -0.555542,1.666672 -0.555542,2.222221c0,1.111115 0,1.666672 0,2.777779c0,0.555557 -0.254883,1.496346 -0.555573,2.222221c-0.212616,0.513268 0,1.111115 0,2.222229c0,0.55555 -0.254883,1.496361 -0.555542,2.222221c-0.425201,1.026535 0,1.666664 0,2.222221c0,0.555557 0,1.111107 0,2.222221c0,0.555557 0,1.111107 0,1.666664c0,0.555557 0,1.111115 0,1.666672c0,0.55555 0,1.111107 0,1.666664c0,0.555557 0,1.111107 0,1.666664c0,0.555557 0,1.111115 0,1.666672c0,0.555557 0.16272,0.718292 0.555542,1.111115c0.392822,0.392822 0,1.111099 0,1.666656c0,0.555557 0.555573,0.555557 0.555573,1.111115c0,0.555557 0.555542,0.555557 0.555542,1.111115c0,0.555557 0.555573,0.555557 1.111115,0.555557c0.555542,0 1.111115,0 1.666656,0c0.555573,0 1.111115,0 1.111115,-0.555557c0,-0.555557 0.16272,-0.718277 0.555573,-1.111115c0.392822,-0.392822 0.555542,-0.555557 0.555542,-1.111115c0,-0.555557 0.16272,-0.718262 0.555573,-1.111115c0.392822,-0.392822 0,-1.111099 0,-1.666656c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.555557 0.555542,-0.555557 0.555542,-1.111107c0,-0.555557 0,-1.666672 0,-2.222221c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.555557 0,-1.666664 0,-2.222221c0,-0.555557 0.555542,-1.111107 0.555542,-2.222221c0,-0.555557 -0.425201,-1.195694 0,-2.222221c0.30069,-0.725876 0.130371,-1.751236 0.555573,-2.777779c0.300659,-0.725861 0.555542,-1.111115 0.555542,-2.222221c0,-1.111115 0.555573,-2.222221 0.555573,-2.777779c0,-0.555557 0,-1.666664 0,-2.222221c0,-1.111115 0,-1.666664 0,-2.222221c0,-1.111115 0,-2.222221 0,-2.777779c0,-1.111115 0.555542,-2.222221 0.555542,-3.333336c0,-0.555557 0,-1.666664 0,-2.222221c0,-1.111107 -0.127655,-1.681526 0,-2.222221c0.285431,-1.209038 0.555573,-1.666664 0.555573,-2.777779c0,-0.555557 0,-1.111107 0,-2.222221c0,-0.555557 0.555542,-1.111115 0.555542,-2.222221c0,-0.555557 0.254883,-0.940788 0.555573,-1.666664c0.425201,-1.026535 0,-1.666672 0,-2.222229c0,-0.55555 0,-1.111107 0,-1.666664c0,-1.111107 0.555542,-1.666664 0.555542,-2.222221c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-2.222221c0,-0.555557 0,-1.111115 0,-1.666664c0,-1.111115 0,-1.666672 0,-2.222225c0,-1.111111 0,-1.666668 0,-2.222221c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555553 0,-1.111111 0,-1.666664c0,-1.111111 0,-1.666668 0,-2.222225c0,-0.555553 0,-1.111111 0,-1.666664c0,-0.555557 0,-1.666668 0,-2.222221c0,-0.555557 0,-1.111115 0,-1.666668c0,-0.555557 0,-1.111111 0,-2.222221c0,-0.555557 0,-1.111111 0,-2.222225c0,-0.555553 0,-1.111111 0,-1.666664c0,-0.555557 0,-1.111111 0,-1.666668c0,-0.555553 0,-1.666668 0,-2.222221c0,-0.555557 -0.555542,-0.555557 -0.555542,-1.111111c0,-0.555557 -0.555573,-1.111111 -0.555573,-1.666668c0,-0.555553 -0.16272,-0.718285 -0.555542,-1.111111c-0.392853,-0.392838 -0.16272,-0.718262 -0.555573,-1.111111c-0.392853,-0.392838 -0.16272,-0.718277 -0.555542,-1.111111c-0.392853,-0.392849 -0.718292,-0.162729 -1.111115,-0.555557c-0.392822,-0.392838 -0.555573,-0.555555 -1.111115,-0.555555c-0.555542,0 -1.365997,-0.170305 -1.666656,0.555555c-0.212585,0.513269 -0.810455,0.385252 -1.111115,1.111111c-0.212585,0.513268 -0.342987,0.597843 -0.555573,1.111111c-0.300659,0.725864 -0.810425,0.940792 -1.111115,1.666668c-0.212616,0.513268 -0.898468,1.708958 -1.111084,2.222221c-0.30069,0.72588 -0.810455,1.496361 -1.111115,2.222225c-0.425201,1.026535 -0.810455,2.051914 -1.111115,2.777775c-0.212585,0.513268 -0.427948,1.68153 -0.555573,2.222225c-0.2854,1.209023 -1.01355,1.721043 -1.666656,2.777775c-0.292084,0.472584 -0.466553,1.673843 -0.555542,2.222225c-0.281433,1.734138 -1.381256,2.124298 -1.666687,3.333332c-0.25528,1.081387 -0.130341,1.751251 -0.555542,2.777779c-0.30069,0.725876 -0.940308,1.769997 -1.666687,2.777775c-0.459381,0.637367 -0.555542,1.666672 -1.111084,2.222225c-1.111115,1.111118 -1.666687,2.222225 -2.222229,3.333332c-0.555573,1.111122 -1.191284,2.185631 -1.666687,3.333336c-0.672302,1.623085 -1.411377,2.251945 -1.666656,3.333328c-0.2854,1.20903 -1.365997,1.496368 -1.666656,2.222221c-0.212616,0.513268 -0.555573,1.111122 -1.111115,1.666672c-0.555573,0.555565 -0.810455,0.940804 -1.111115,1.666664c-0.212585,0.513268 -0.096161,1.029305 -0.555542,1.666664c-0.726379,1.007782 -0.898499,1.708961 -1.111115,2.222229c-0.30069,0.725876 -0.651733,1.029297 -1.111115,1.666664c-0.726379,1.007774 -0.810455,1.496361 -1.111115,2.222221c-0.212585,0.513268 -0.555573,1.111115 -0.555573,1.666664c0,0.555557 -0.825684,0.457642 -1.111084,1.666672c-0.127625,0.540688 -0.342987,1.153397 -0.555573,1.666664c-0.300659,0.725861 -0.651703,1.029289 -1.111115,1.666664c-0.726379,1.007767 -0.685913,1.751244 -1.111115,2.777779c-0.300659,0.725861 -0.555542,1.111107 -1.111115,1.666672c-0.555542,0.555542 -0.810425,1.496361 -1.111084,2.222221c-0.212585,0.51326 -0.342987,1.153397 -0.555573,1.666664c-0.300659,0.725861 -1.111115,1.111115 -1.111115,2.222221c0,0.555557 -0.555542,1.111115 -0.555542,1.666664c0,0.555557 -0.555573,0.555557 -0.555573,1.111115c0,0.555557 -0.555542,0.555557 -0.555542,1.666664c0,0.555557 -0.718292,0.162727 -1.111115,0.555557c-0.392853,0.392838 -0.254883,0.940811 -0.555542,1.666664c-0.212616,0.513268 -0.254883,0.940796 -0.555573,1.666672c-0.212616,0.513268 -0.16272,0.718277 -0.555542,1.111107c-0.392853,0.392838 -0.555573,0.555557 -0.555573,1.111115c0,0.555557 -0.254883,0.940804 -0.555542,1.666664c-0.212585,0.513268 0.392853,1.273834 0,1.666672c-0.392853,0.392853 -0.651733,0.63736 -1.111115,0c-0.726379,-1.007782 -0.555573,-1.666672 -0.555573,-2.222229c0,-1.111107 0,-1.666664 0,-2.777771c0,-0.555557 0,-1.666672 0,-2.777779c0,-1.111115 0,-2.222221 0,-2.777779c0,-0.555557 0,-1.666672 0,-2.222221c0,-1.111115 0,-1.666672 0,-2.777779c0,-1.111115 0,-2.222221 0,-3.333336c0,-1.111107 0,-2.222221 0,-3.333336c0,-1.111107 0,-2.222221 0,-3.333328c0,-1.111115 0,-2.222221 0,-3.333336c0,-0.555557 0,-1.666664 0,-2.222221c0,-0.555557 0,-1.666664 0,-2.222221c0,-0.555557 0,-1.666664 0,-2.222221c0,-0.555557 0,-1.666672 0,-2.222221c0,-1.111115 0.25528,-2.251945 0,-3.333336c-0.2854,-1.20903 -0.555542,-2.222221 -0.555542,-3.333336c0,-1.111107 0,-2.222221 0,-2.777779c0,-1.111107 0,-2.222221 0,-2.777771c0,-1.111115 0,-1.666672 0,-2.222225c0,-1.111111 0,-2.222221 0,-2.777779c0,-1.111111 0,-2.222221 0,-3.333332c0,-1.111111 0,-2.222221 0,-2.777779c0,-0.555557 0,-1.666668 0,-2.777779c0,-0.555553 0,-1.111111 0,-2.222221c0,-1.111111 0,-1.666668 0,-2.222221c0,-1.111111 0.130341,-2.306805 0.555542,-3.333336c0.30069,-0.725876 0.555573,-1.111111 0.555573,-1.666664c0,-1.111111 0.16272,-1.273842 0.555542,-1.666668c0.392822,-0.392834 0,-1.111111 0,-1.666668c0,-0.555553 0.254883,-0.940788 0.555573,-1.666664c0.212616,-0.513268 0,-1.111111 0,-1.666668c0,-0.555553 -0.212585,-1.1534 0,-1.666668c0.300659,-0.725861 0.555542,-1.111111 0.555542,-1.666664c0,-0.555557 0.555573,-1.111113 0.555573,-1.666668c0,-0.555555 0,-1.111111 0,-1.666666c0,-0.555555 -0.718292,-0.162727 -1.111115,-0.555555c-0.392822,-0.392838 -0.555573,-0.555555 -1.111115,-0.555555c-0.555573,0 -1.111115,0 -1.666656,0c-0.555573,0 -1.111115,0 -1.666687,0c-0.555542,0 -1.111115,0 -1.666656,0l-0.555573,0" id="svg_14" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
                                            <path d="m337.5,32.473957c0.555542,0 2.222229,0 3.333344,0c1.111115,0 2.170959,0.275681 4.444427,0.555557c1.654205,0.20364 3.333344,0 5,0c2.222229,0 4.461121,0.271523 6.666687,0c2.273438,-0.279877 5,-0.555557 7.777771,-0.555557c2.222229,0 4.444427,-0.555553 6.111115,-0.555553c2.222198,0 3.821411,-0.274145 5.555542,-0.555557c1.645142,-0.266972 3.333344,-0.555555 4.444458,-0.555555c1.666656,0 2.607452,-0.25489 3.333313,-0.555555c1.02652,-0.425211 2.222229,0 2.777802,0c1.111084,0 1.666656,0 2.777771,0c1.111115,0 2.251953,0.255274 3.333313,0c1.209045,-0.285412 2.222229,-0.555555 3.333344,-0.555555c0.555573,0 1.111115,0 1.666656,0c1.111115,0 1.666687,0 2.222229,0c0.555573,0 1.111115,0 1.666687,0c0.555542,0 1.111084,0 1.111084,0.555555c0,1.111111 0.392822,1.829388 0,2.222221c-0.392822,0.392826 -0.555542,0.555557 -0.555542,1.111111c0,0.555557 -0.342926,0.597847 -0.555542,1.111115c-0.30069,0.725876 -0.810455,0.940804 -1.111115,1.666664c-0.212585,0.513268 -0.16272,1.27383 -0.555573,1.666668c-0.392822,0.392826 -0.162689,0.718273 -0.555542,1.111111c-0.392853,0.392849 -0.718262,1.27383 -1.111115,1.666668c-0.392853,0.392849 -1.111115,1.111118 -1.666656,1.666664c-0.555573,0.555565 -0.983459,1.125973 -1.111115,1.666668c-0.285431,1.209034 -1.241486,2.306797 -1.666687,3.333332c-0.300659,0.725864 -1.168549,2.170189 -1.666656,2.777779c-1.269928,1.549076 -1.298615,2.39444 -2.222229,3.888889c-0.413055,0.668327 -0.788239,1.899368 -1.666656,2.777779c-0.878418,0.878414 -1.49585,2.325558 -2.222229,3.333332c-0.918793,1.274738 -2.337128,2.118134 -3.333344,3.333332c-1.269928,1.549065 -1.897705,3.2006 -2.777771,5c-0.771851,1.578178 -1.549927,2.82135 -2.222229,4.444443c-0.475403,1.147697 -1.303406,2.058601 -2.222198,3.333336c-0.726379,1.007774 -0.555573,1.666664 -1.111115,2.222221c-1.111115,1.111122 -1.343811,2.454926 -2.222229,3.333336c-0.878418,0.878418 -1.49585,2.325562 -2.222229,3.333336c-0.918793,1.274734 -2.414551,2.058601 -3.333313,3.333328c-0.726379,1.007782 -1.303436,2.614151 -2.222229,3.888893c-0.726379,1.007774 -1.111115,2.222214 -2.222229,3.333328c-0.555542,0.55555 -1.111115,2.222221 -1.666656,2.777779c-1.111115,1.111122 -1.666687,2.222229 -2.222229,3.333336c-0.555573,1.111115 -0.685913,1.751236 -1.111115,2.777779c-0.300659,0.725861 -0.342926,1.153397 -0.555542,1.666664c-0.30069,0.725876 -0.810455,1.496361 -1.111115,2.222221c-0.212585,0.513268 -0.254883,0.940796 -0.555573,1.666672c-0.212616,0.51326 -0.254883,0.940804 -0.555542,1.666664c-0.212585,0.513268 0.212616,1.153397 0,1.666664c-0.30069,0.725876 -0.16272,1.273834 -0.555573,1.666672c-0.392822,0.39283 -0.555542,0.55555 -0.555542,1.111107c0,0.555557 0,1.111115 0,1.666664c0,0.555557 0.385223,0.810448 1.111115,1.111115c1.02655,0.425201 1.666656,0 2.222229,0c1.111084,0 2.222198,0 3.333313,0c1.666687,0 2.777771,0 4.444458,0c1.111115,0 2.784943,0.088989 3.333313,0c1.734161,-0.28141 3.333344,-1.111115 3.888916,-1.111115c1.111084,0 2.822357,-0.17263 4.444427,-0.55555c1.209045,-0.285416 2.82135,-0.438805 4.444458,-1.111115c1.147705,-0.475395 2.777771,-0.555557 3.333313,-0.555557c1.111115,0 1.666687,0 2.777802,0c1.111084,0 1.666656,-0.55555 2.777771,-0.55555c1.111115,0 1.666656,0 3.333313,0c0.555573,0 1.666687,-0.555557 2.777802,-0.555557c1.111115,0 1.666656,0 2.222198,0c0.555573,0 1.111115,-0.555557 1.666687,-0.555557c0.555542,0 1.666656,0 2.777771,0c1.111115,0 1.666656,-0.555557 2.222229,-0.555557c0.555542,0 1.153412,0.212593 1.666656,0c0.725891,-0.300667 1.111115,-0.555557 1.111115,0c0,0.555557 -0.16272,0.718285 -0.555542,1.111115c-0.392853,0.392838 0,1.111107 0,1.666664c0,0.555557 0,1.111115 0,1.666664c0,0.555557 -0.555573,1.111115 -0.555573,1.666672c0,0.555557 0.392853,1.273827 0,1.666664c-0.392822,0.39283 -0.825684,0.457634 -1.111115,1.666664c-0.127655,0.540695 -0.555542,0.555557 -1.111115,0.555557c-1.111115,0 -1.666656,0 -2.222198,0c-1.111115,0 -1.666687,0 -3.333344,0c-1.111115,0 -2.222229,0 -3.333344,0c-1.111115,0 -2.222229,0 -3.888885,0c-1.111115,0 -2.777771,0 -4.444427,0c-1.111115,0 -2.124298,0.270142 -3.333344,0.555557c-1.08139,0.25528 -2.251953,-0.25528 -3.333344,0c-1.209045,0.285416 -2.777771,1.111115 -5,1.111115c-1.666656,0 -3.837646,0.275681 -6.111115,0.55555c-1.654175,0.203636 -3.265839,0.274147 -5,0.555557c-0.54837,0.088989 -1.666656,0 -2.222198,0c-0.555573,0 -1.111115,0 -1.666687,0c-0.555542,0 -1.111115,0 -1.666656,0c-0.555573,0 -1.111115,0 -1.666656,0c-0.555573,0 -0.718262,0.16272 -1.111115,0.555557c-0.392853,0.392853 -1.111115,0 -1.666687,0c-0.555542,0 -1.111115,0 -1.666656,0c-0.555542,0 -1.111115,0 -1.666656,0c-1.111115,0 -2.222229,0 -2.777802,0c-0.555542,0 -1.666656,0 -2.222198,0c-0.555573,0 -1.111115,0 -1.666687,0c-0.555542,0 -1.111115,0 -1.666656,0c-0.555542,0 -1.111115,0 -1.666656,0c-0.555573,0 -1.111115,0 -1.666687,0c-0.555542,0 -1.273834,0.39283 -1.666656,0c-0.392853,-0.392838 -0.212585,-1.153404 0,-1.666664c0.300659,-0.725861 1.022125,-1.118286 1.111115,-1.666672c0.281403,-1.734131 1.071136,-2.561691 2.222229,-3.888885c0.813934,-0.938469 1.724091,-2.170189 2.222198,-2.777779c1.269928,-1.54908 2.051422,-2.881119 2.777802,-3.888893c0.918793,-1.274734 2.063385,-3.450928 3.333313,-5c0.996216,-1.215187 2.222229,-2.777771 3.333344,-4.444443c1.111115,-1.666664 1.450348,-2.866264 2.222229,-4.444443c0.880066,-1.799393 1.298615,-2.949997 2.222229,-4.444443c0.82608,-1.336655 2.222198,-2.777771 2.777771,-3.888893c0.555542,-1.111099 1.396118,-1.996658 2.222229,-3.333328c0.923615,-1.494446 1.111084,-2.777771 1.666656,-3.888893c0.555542,-1.111099 1.666656,-2.222214 2.222229,-3.333328c0.555542,-1.111107 1.207275,-2.140411 1.666656,-2.777779c0.726349,-1.007774 0.384735,-1.770004 1.111115,-2.777779c0.459381,-0.637367 1.381256,-1.013199 1.666656,-2.222221c0.127625,-0.540695 0.130371,-1.195686 0.555573,-2.222221c0.300659,-0.725861 1.381256,-1.013199 1.666656,-2.222229c0.127625,-0.540688 0.342926,-1.153397 0.555542,-1.666664c0.30069,-0.725876 1.365997,-0.940788 1.666687,-1.666664c0.212616,-0.513268 0.555542,-1.66666 1.111115,-2.222225c0.555542,-0.555546 1.365997,-1.496357 1.666656,-2.222221c0.425201,-1.026535 0.810425,-1.496346 1.111115,-2.222221c0.212616,-0.513268 0.555542,-0.555557 0.555542,-1.111111c0,-0.555557 0.555573,-0.555557 0.555573,-1.111111c0,-0.555557 0.555542,-0.555557 0.555542,-1.111111c0,-0.555557 0.810455,-0.940807 1.111115,-1.666668c0.212585,-0.513268 0.555573,-1.111111 0.555573,-1.666668c0,-0.555553 0.555542,-0.555553 0.555542,-1.111111c0,-0.555553 0,-1.111111 0,-1.666668c0,-0.555553 -0.555542,-0.555553 -1.111115,-0.555553c-0.555542,0 -1.111115,0 -2.222229,0c-1.666656,0 -3.333313,0 -5,0c-2.222198,0 -3.888885,0 -5.555542,0c-1.666656,0 -4.444458,0 -6.111115,0c-1.111115,0 -2.222229,0 -3.333344,0c-0.555542,0 -1.111115,0 -2.222198,0c-0.555573,0 -1.111115,0 -2.222229,0c-0.555573,0 -1.666687,0 -2.777771,0c-1.111115,0 -2.222229,0 -3.888916,0c-0.555542,0 -2.222198,0 -2.777771,0c-0.555542,0 -1.111115,0 -1.666656,0c-0.555573,0 -0.718262,-0.16272 -1.111115,-0.555557c-0.392822,-0.392826 -1.111115,0 -1.666656,0c-0.555573,0 -0.718292,-0.16272 -1.111115,-0.555553c-0.392853,-0.392849 -1.273834,0.392849 -1.666687,0c-0.392853,-0.392838 0,-1.111111 0,-1.666668c0,-0.555553 0,-1.111111 0,-1.666668c0,-0.555553 0.212585,-1.153397 0,-1.666664c-0.300659,-0.725864 -0.555542,-1.111111 -0.555542,-1.666668c0,-0.555553 0,-1.111111 0,-1.666668c0,-0.555553 0,-1.111111 0,-1.666664c0,-0.555557 0,-1.111111 0,-1.666668l0,-0.555553l0,-0.555557l0,-0.555557" id="svg_15" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
                                            <path d="m435.277771,33.585068c-0.555542,0 -0.880981,-0.230118 -1.666656,0.555557c-0.392853,0.392838 -1.029297,1.207279 -1.666656,1.666668c-1.007782,0.726368 -1.666687,1.111115 -2.222229,1.666664c-1.111115,1.111118 -1.111115,1.66666 -1.666687,2.222225c-0.555542,0.555546 -1.207245,1.584839 -1.666656,2.222221c-0.726349,1.007767 -1.303436,1.503025 -2.222229,2.777779c-0.726349,1.007771 -1.641754,1.971764 -2.222198,3.888885c-0.16098,0.531719 -0.555573,1.666676 -1.111115,2.777779c-0.555573,1.111118 -1.381256,2.124298 -1.666687,3.333336c-0.25528,1.081387 -0.852722,2.394855 -1.666656,3.333332c-1.151062,1.327198 -1.191254,2.741196 -1.666656,3.888889c-0.672302,1.623093 -1.111115,2.777771 -1.666687,4.444443c-0.555542,1.666656 -0.994354,3.376907 -1.666656,5c-0.475372,1.147697 -0.1875,2.394447 -1.111115,3.888893c-0.826111,1.336662 -1.191254,2.741188 -1.666656,3.888885c-0.672302,1.623093 -0.635712,2.741196 -1.111115,3.888885c-0.672302,1.6231 -0.825714,3.23542 -1.111115,4.44445c-0.382904,1.622078 -0.274139,2.710312 -0.555542,4.444443c-0.088989,0.548386 -0.555573,2.222221 -0.555573,2.777779c0,1.666664 -0.555542,2.777779 -0.555542,3.888885c0,1.666672 0,2.777779 0,3.888893c0,1.111107 -0.25528,2.807503 0,3.888885c0.2854,1.20903 0.377563,2.79213 0.555542,3.888893c0.281433,1.734138 0.855835,2.807495 1.111115,3.888885c0.2854,1.20903 0.98349,2.792641 1.111115,3.333336c0.2854,1.209023 0.526978,1.832611 1.111115,2.777779c0.653107,1.056725 1.49585,1.769997 2.222229,2.777771c0.459381,0.637367 0.940277,1.214447 1.666656,2.222229c0.459381,0.63736 1.666656,1.111107 2.222229,1.666664c1.111115,1.111107 1.584839,1.762825 2.222198,2.222221c1.007782,0.726364 1.496368,1.366013 2.222229,1.666672c0.513275,0.212616 1.214447,0.384735 2.222229,1.111099c0.63736,0.459381 1.111115,0.555557 1.666656,1.111115c0.555573,0.555573 1.708984,0.342957 2.222229,0.555557c0.725891,0.300659 1.140839,0.300278 2.222229,0.555557c1.209045,0.285416 1.666656,0.555557 2.777771,0.555557c0.555573,0 1.111115,0 1.666656,0c1.111115,0 1.666687,0 1.666687,-0.555557c0,-0.555557 0.555542,-0.555542 1.111115,-1.111115c0.555542,-0.555557 0.384766,-1.214447 1.111115,-2.222214c0.459381,-0.63736 1.207245,-1.584854 1.666656,-2.222229c0.726349,-1.007767 0.685913,-1.751244 1.111115,-2.777779c0.601318,-1.451736 1.411377,-2.251945 1.666656,-3.333328c0.285431,-1.209038 0.994354,-2.821358 1.666656,-4.44445c0.475403,-1.147697 1.111115,-2.777763 1.666687,-3.888885c0.555542,-1.111107 1.381256,-2.679863 1.666656,-3.888885c0.25528,-1.08139 0.438812,-2.2658 1.111115,-3.888893c0.475372,-1.14769 -0.017487,-2.451149 1.111115,-4.444443c0.7742,-1.367386 1.111115,-2.777786 1.666656,-4.444443c0.555573,-1.666679 1.111115,-3.333328 1.666687,-5c0.555542,-1.666664 0.339233,-3.421822 1.111084,-5c0.880066,-1.799408 1.191284,-2.741188 1.666687,-3.888893c0.672302,-1.623085 0.635712,-2.741188 1.111115,-3.888885c0.672302,-1.623093 0.172607,-2.266808 0.555542,-3.888893c0.285431,-1.20903 0.555573,-2.222221 0.555573,-3.333328c0,-1.666672 0,-2.777779 0,-4.44445c0,-1.666664 0,-3.333328 0,-3.888885c0,-1.666668 0,-2.777779 0,-3.333332c0,-1.666668 0,-2.222225 0,-3.333336c0,-1.111111 0,-2.222221 0,-2.777775c0,-1.111115 0.170807,-1.77 -0.555573,-2.777779c-0.459381,-0.637367 -0.651703,-1.584843 -1.111115,-2.222221c-0.726349,-1.007771 -0.747864,-1.50304 -1.666656,-2.777779c-0.726379,-1.007774 -0.515594,-2.006138 -1.666656,-3.333336c-0.813934,-0.938473 -1.762848,-1.584854 -2.222229,-2.222221c-0.726379,-1.007778 -1.111115,-1.666656 -1.666687,-2.222221c-0.555542,-0.55555 -1.365967,-0.940788 -1.666656,-1.666668c-0.212616,-0.513264 -0.162689,-0.718273 -0.555542,-1.111111c-0.392853,-0.392849 -0.555573,-0.555553 -1.111115,-0.555553c-0.555573,0 -0.555573,-0.555557 -1.111115,-0.555557c-0.555573,0 -0.555573,-0.555553 -1.111115,-0.555553c-0.555542,0 -1.111115,-0.555557 -1.666656,-0.555557c-1.111115,0 -1.666687,0 -2.222229,0c-0.555573,0 -1.111115,0 -1.666656,0c-0.555573,0 -1.111115,0 -1.111115,-0.555557l-0.555573,0" id="svg_16" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
                                            <path d="m433.055542,48.029514c0,0 -0.555542,0 -0.555542,0.555553c0,0.555557 0.177979,1.681015 0,2.777779c-0.281403,1.734135 -1.488678,2.792126 -1.666656,3.888889c-0.281433,1.734142 -0.871979,2.851662 -1.666687,5c-0.431,1.165092 -1.381256,2.679867 -1.666656,3.888889c-0.382904,1.622078 -0.994354,3.376915 -1.666656,5c-0.475403,1.147705 -0.825714,1.568748 -1.111115,2.777779c-0.25528,1.081383 -0.300293,2.251945 -0.555573,3.333336c-0.2854,1.209023 -0.555542,2.222214 -1.111115,3.333328c-0.555542,1.111107 -0.810425,1.496368 -1.111084,2.222221c-0.425201,1.026535 -0.555573,2.222221 -0.555573,2.777779c0,0.555557 -0.555542,1.666672 -0.555542,2.222221c0,1.111115 -0.427948,2.237083 -0.555573,2.777779c-0.2854,1.20903 -0.342926,1.708961 -0.555542,2.222221c-0.30069,0.725876 -0.427948,1.125977 -0.555573,1.666672c-0.2854,1.209023 -0.555542,1.666664 -0.555542,2.222221c0,0.555557 0,1.111107 0,1.666664c0,0.555557 -0.270142,1.013191 -0.555573,2.222221c-0.127655,0.540695 0,1.111115 0,1.666672c0,0.55555 0,1.111107 0,1.666664c0,0.555557 0,1.111107 0,1.666664c0,0.555557 0,1.111115 0,1.666672c0,0.55555 0,1.111107 0,1.666664c0,0.555557 0,1.111107 0,1.666664c0,0.555557 0,1.111115 0,1.666672c0,0.55555 0,1.111107 0,1.666664c0,0.555557 0.16275,0.718277 0.555573,1.111107c0.392822,0.39283 0.162689,0.718277 0.555542,1.111115c0.392853,0.392853 0.718292,0.162727 1.111115,0.555557c0.392853,0.392838 0.16275,0.718277 0.555573,1.111107c0.392822,0.39283 0.597839,0.342949 1.111115,0.555557c0.725861,0.300667 1.273804,0.162704 1.666656,0.555557c0.392853,0.392838 0.555542,0.555557 1.111115,0.555557c0.555542,0 1.125977,-0.127632 1.666656,0c1.209015,0.285408 1.666656,0.55555 2.222229,0.55555c0.555542,0 1.125977,0.127632 1.666656,0c1.209015,-0.285408 1.273834,-0.718269 1.666687,-1.111107c0.392822,-0.39283 1.111084,-0.55555 1.666656,-1.111115c0.555542,-0.555542 0.638519,-0.819023 1.111115,-1.111107c1.056732,-0.653099 0.898529,-1.708961 1.111115,-2.222221c0.300659,-0.725861 1.207275,-1.584854 1.666656,-2.222221c0.726349,-1.007774 0.940308,-2.325569 1.666656,-3.333336c0.459412,-0.637383 0.384766,-1.770012 1.111115,-2.777779c0.459412,-0.637383 0.810455,-2.051918 1.111115,-2.777779c0.425201,-1.026535 0.555573,-2.222221 0.555573,-2.777779c0,-1.111107 0.825684,-1.568748 1.111084,-2.777779c0.25528,-1.081383 0.270142,-1.568741 0.555573,-2.777779c0.25528,-1.081383 -0.127625,-2.237083 0,-2.777771c0.2854,-1.20903 0.427887,-2.237091 0.555542,-2.777779c0.285431,-1.209038 0.810455,-2.051918 1.111115,-2.777779c0.425201,-1.026543 0,-2.222221 0,-3.333336c0,-0.555557 0,-1.666664 0,-2.222221c0,-1.111115 0.555573,-1.666664 0.555573,-2.222221c0,-1.111115 0,-1.666664 0,-2.777779c0,-0.555557 0,-1.666664 0,-2.222221c0,-0.555557 0,-1.666664 0,-2.222221c0,-0.555557 0,-1.666672 0,-2.222221c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-1.111111 -0.096161,-1.584843 -0.555573,-2.222221c-0.726349,-1.007767 -0.555542,-1.666668 -0.555542,-2.222221c0,-0.555557 -0.555573,-1.111115 -0.555573,-1.666668c0,-0.555557 -0.254883,-0.940804 -0.555542,-1.666668c-0.212585,-0.513268 -0.427948,-0.570415 -0.555573,-1.111111c-0.2854,-1.209023 -0.16272,-1.829388 -0.555542,-2.222221c-0.392822,-0.392826 -0.16272,-0.718277 -0.555542,-1.111111c-0.392853,-0.392849 -0.385254,-0.810448 -1.111115,-1.111111c-0.513275,-0.212612 -0.16275,-0.718277 -0.555573,-1.111111c-0.392822,-0.392826 -1.111115,-0.555557 -1.666656,-0.555557c-0.555573,0 -0.555573,-0.555557 -1.111115,-0.555557c-0.555542,0 -1.111115,0 -1.666656,0c-0.555573,0 -1.111115,0 -1.666687,0c-0.555542,0 -1.111115,0 -1.666656,0c-0.555542,0 -1.111115,0 -1.111115,0.555557l-0.555542,0" id="svg_17" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
                                            <path d="m430.833344,95.807289c0.555542,0 0.810425,0.385239 1.111115,1.111115c0.212616,0.513268 0.232666,1.343811 1.111084,2.222221c0.878418,0.878418 1.666687,1.666664 2.222229,2.222221c1.111115,1.111122 1.343811,2.454926 2.222229,3.333336c0.878418,0.878418 1.49585,1.214439 2.222229,2.222221c0.459381,0.637367 0.940308,1.214455 1.666656,2.222221c0.459412,0.637383 0.718292,0.718285 1.111115,1.111115c0.392822,0.39283 0.254883,0.940804 0.555542,1.666664c0.212585,0.513268 0.254883,0.940788 0.555573,1.666664c0.212616,0.513268 0.130341,1.195694 0.555542,2.222221c0.30069,0.725876 0.983459,1.125977 1.111115,1.666672c0.285431,1.20903 0.59787,1.454071 1.111115,1.666664c0.725891,0.300667 0.810455,1.496361 1.111115,2.222221c0.212585,0.513268 0.555542,0.555557 0.555542,1.111115c0,0.55555 0.810455,0.940804 1.111115,1.666664c0.212585,0.513268 0.254883,0.940788 0.555573,1.666664c0.212616,0.513268 -0.392853,1.273834 0,1.666672c0.392822,0.39283 0.162689,0.718269 0.555542,1.111107c0.392853,0.392853 0.342987,0.597839 0.555573,1.111115c0.300659,0.725861 0.555542,1.111115 0.555542,1.666672c0,0.555542 0,1.111099 0,1.666656c0,0.555557 0.212585,1.153397 0,1.666672c-0.300659,0.725861 -1.365997,0.940811 -1.666656,1.666672c-0.212585,0.51326 -0.555573,0.555542 -1.111115,1.111099c-0.555573,0.555573 -1.750549,-0.314087 -2.777771,1.111115c-0.324829,0.450699 -0.555573,0.555557 -1.111115,0.555557c-0.555573,0 -0.718262,-0.16272 -1.111115,-0.555557c-0.392853,-0.392853 -0.555573,-0.555557 -0.555573,-1.111115c0,-0.555557 0,-1.111099 0,-1.666656c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.555557 -0.555542,-0.555557 -0.555542,-1.111115c0,-0.555557 0,-1.666656 0,-2.222214c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 -0.342926,-0.597847 -0.555542,-1.111115c-0.30069,-0.725876 -0.16272,-1.829384 -0.555573,-2.222221c-0.392822,-0.39283 -0.555542,-0.555557 -0.555542,-1.111115c0,-0.55555 -0.16272,-1.273827 -0.555573,-1.666664c-0.392822,-0.39283 -0.810425,-0.385231 -1.111115,-1.111107c-0.212616,-0.513268 -0.555542,-0.555557 -0.555542,-1.111115c0,-0.555557 -0.16275,-1.273834 -0.555573,-1.666664c-0.392822,-0.39283 -0.898468,-0.597847 -1.111084,-1.111115c-0.30069,-0.725876 -0.718292,-0.718277 -1.111115,-1.111107c-0.392853,-0.392838 -0.042297,-0.898506 -0.555573,-1.111115c-0.725861,-0.300667 -0.555542,-1.111107 -1.111115,-1.666664c-0.555542,-0.55555 -0.162689,-1.273834 -0.555542,-1.666672c-0.392853,-0.392853 -0.16272,-0.718269 -0.555573,-1.111107c-0.392822,-0.39283 -0.342957,-0.597847 -0.555542,-1.111115c-0.300659,-0.725861 -0.555542,-1.111107 -0.555542,-1.666664c0,-0.555557 -0.555573,-0.555557 -0.555573,-1.111115c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666672c0,-0.55555 0,-1.111107 0,-1.666664c0,-0.555557 0,-1.111115 0,-1.666664l0,-0.555557l0,-0.555557" id="svg_20" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
                                        </g>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="box" id="anime9">
                    <div class="box-header">
                        <h4 class="box-title mb-15">时间曲线</h4>
                        <span class="text-muted d-block">函数请访问<a href="https://www.animejs.cn/documentation/#linearEasing">官方文档</a></span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">匀速</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre>
<code class="language-javascript">anime({
  targets: '.linear-easing-demo',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  easing: 'linear'
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="linear-easing-demo rect bg-danger"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">三次贝塞尔</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre>
<code class="language-javascript">anime({
  targets: '.cubic-bezier-demo',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  easing: 'cubicBezier(.5, .05, .1, .3)'
})</code></pre>
                            </div>
                            <div class="box-footer penner-equations-demo">
                                <div class="cubic-bezier-demo rect bg-danger"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">弹簧</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre>
<code class="language-javascript">anime({
  targets: '.spring-physics-demo',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  easing: 'spring(1, 80, 10, 0)'
})</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="spring-physics-demo rect bg-danger"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">弹跳</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre>
<code class="language-javascript">anime({
  targets: '.elastic-easing-demo',
  translateX: 250,
  easing: function(el) {
    return el.getAttribute('data-ease');
  },
  duration: 1000
})</code></pre>
                            </div>
                            <div class="box-footer">
                                <div data-ease="easeInElastic(1, .6)" class="elastic-easing-demo rect bg-danger mb-5 ml-25"></div>
                                <div data-ease="easeOutElastic(1, .6)" class="elastic-easing-demo rect bg-danger mb-5 ml-25"></div>
                                <div data-ease="easeInOutElastic(1, .6)" class="elastic-easing-demo rect bg-danger ml-25"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">台阶式</h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre>
<code class="language-javascript">anime({
  targets: '.step-easing-demo',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  easing: 'steps(5)'
})</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="step-easing-demo rect bg-danger"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box">
                            <div class="box-header">
                                <h6 class="box-title">自定义
                                </h6>
                                <div class="box-controls pull-right">
                                    <a href="#" class="animation"><i class="fa fa-play"></i></a>
                                    <a href="#" class="mr-20 animation-copy">复制代码</a>
                                </div>
                            </div>
                            <div class="box-body">
							<pre>
<code class="language-javascript">anime({
  targets: '.custom-easing-demo',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  duration: 2000,
  easing: function(el, i, total) {
    return function(t) {
      return Math.pow(Math.sin(t * (i + 1)), total);
    }
  }
});</code></pre>
                            </div>
                            <div class="box-footer">
                                <div class="custom-easing-demo rect bg-danger mb-5"></div>
                                <div class="custom-easing-demo rect bg-danger mb-5"></div>
                                <div class="custom-easing-demo rect bg-danger"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </section>
        </div>
    </div>

    <footer class="main-footer"></footer>
    <aside class="control-sidebar">

        <div class="rpanel-title"><span class="pull-right btn btn-circle btn-danger"><i class="ion ion-close text-white"
                                                                                        data-toggle="control-sidebar"></i></span>
        </div>
        <ul class="nav nav-tabs control-sidebar-tabs">
            <li class="nav-item"><a href="#control-sidebar-home-tab" data-toggle="tab" class="active"><i
                    class="mdi mdi-message-text"></i></a></li>
            <li class="nav-item"><a href="#control-sidebar-settings-tab" data-toggle="tab"><i
                    class="mdi mdi-playlist-check"></i></a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="control-sidebar-home-tab">
                <div class="flexbox">
                    <a href="javascript:void(0)" class="text-grey">
                        <i class="ti-more"></i>
                    </a>
                    <p>用户</p>
                    <a href="javascript:void(0)" class="text-right text-grey"><i class="ti-plus"></i></a>
                </div>
                <div class="lookup lookup-sm lookup-right d-none d-lg-block">
                    <input type="text" name="s" placeholder="搜索" class="w-p100">
                </div>
                <div class="media-list media-list-hover mt-20">
                    <div class="media py-10 px-0">
                        <a class="avatar avatar-lg status-success" href="#">
                            <img src="http://hoppinzq.com/zui/static/picture/0.jpg" alt="...">
                        </a>
                        <div class="media-body">
                            <p class="font-size-16">
                                <a class="hover-primary" href="#"><strong>HOPPIN</strong></a>
                            </p>
                            <p>你好</p>
                            <span>Just now</span>
                        </div>
                    </div>

                    <div class="media py-10 px-0">
                        <a class="avatar avatar-lg status-danger" href="#">
                            <img src="http://hoppinzq.com/zui/static/picture/0.jpg" alt="...">
                        </a>
                        <div class="media-body">
                            <p class="font-size-16">
                                <a class="hover-primary" href="#"><strong>HOPPIN</strong></a>
                            </p>
                            <p>你好啊</p>
                            <span>33 min ago</span>
                        </div>
                    </div>

                    <div class="media py-10 px-0">
                        <a class="avatar avatar-lg status-warning" href="#">
                            <img src="http://hoppinzq.com/zui/static/picture/0.jpg" alt="...">
                        </a>
                        <div class="media-body">
                            <p class="font-size-16">
                                <a class="hover-primary" href="#"><strong>HOPPIN</strong></a>
                            </p>
                            <p>你好</p>
                            <span>42 min ago</span>
                        </div>
                    </div>

                    <div class="media py-10 px-0">
                        <a class="avatar avatar-lg status-primary" href="#">
                            <img src="http://hoppinzq.com/zui/static/picture/0.jpg" alt="...">
                        </a>
                        <div class="media-body">
                            <p class="font-size-16">
                                <a class="hover-primary" href="#"><strong>HOPPIN</strong></a>
                            </p>
                            <p>你好</p>
                            <span>42 min ago</span>
                        </div>
                    </div>
                    <div class="media py-10 px-0">
                        <a class="avatar avatar-lg status-danger" href="#">
                            <img src="http://hoppinzq.com/zui/static/picture/0.jpg" alt="...">
                        </a>
                        <div class="media-body">
                            <p class="font-size-16">
                                <a class="hover-primary" href="#"><strong>HOPPIN</strong></a>
                            </p>
                            <p>你好啊</p>
                            <span>33 min ago</span>
                        </div>
                    </div>

                    <div class="media py-10 px-0">
                        <a class="avatar avatar-lg status-warning" href="#">
                            <img src="http://hoppinzq.com/zui/static/picture/0.jpg" alt="...">
                        </a>
                        <div class="media-body">
                            <p class="font-size-16">
                                <a class="hover-primary" href="#"><strong>HOPPIN</strong></a>
                            </p>
                            <p>你好</p>
                            <span>42 min ago</span>
                        </div>
                    </div>

                    <div class="media py-10 px-0">
                        <a class="avatar avatar-lg status-primary" href="#">
                            <img src="http://hoppinzq.com/zui/static/picture/0.jpg" alt="...">
                        </a>
                        <div class="media-body">
                            <p class="font-size-16">
                                <a class="hover-primary" href="#"><strong>HOPPIN</strong></a>
                            </p>
                            <p>你好</p>
                            <span>42 min ago</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="control-sidebar-settings-tab">
                <div class="flexbox">
                    <a href="javascript:void(0)" class="text-grey">
                        <i class="ti-more"></i>
                    </a>
                    <p>待办列表</p>
                    <a href="javascript:void(0)" class="text-right text-grey"><i class="ti-plus"></i></a>
                </div>
                <ul class="todo-list mt-20">
                    <li class="py-15 px-5 by-1">
                        <input type="checkbox" id="basic_checkbox_1" class="filled-in">
                        <label for="basic_checkbox_1" class="mb-0 h-15"></label>
                        <span class="text-line">吃饭</span>
                        <small class="badge bg-danger"><i class="fa fa-clock-o"></i> 2 mins</small>
                        <div class="tools">
                            <i class="fa fa-edit"></i>
                            <i class="fa fa-trash-o"></i>
                        </div>
                    </li>
                    <li class="py-15 px-5">
                        <input type="checkbox" id="basic_checkbox_2" class="filled-in">
                        <label for="basic_checkbox_2" class="mb-0 h-15"></label>
                        <span class="text-line">睡觉</span>
                        <small class="badge bg-info"><i class="fa fa-clock-o"></i> 4 hours</small>
                        <div class="tools">
                            <i class="fa fa-edit"></i>
                            <i class="fa fa-trash-o"></i>
                        </div>
                    </li>
                    <li class="py-15 px-5 by-1">
                        <input type="checkbox" id="basic_checkbox_3" class="filled-in">
                        <label for="basic_checkbox_3" class="mb-0 h-15"></label>
                        <span class="text-line">打火猫</span>
                        <small class="badge bg-warning"><i class="fa fa-clock-o"></i> 1 day</small>
                        <div class="tools">
                            <i class="fa fa-edit"></i>
                            <i class="fa fa-trash-o"></i>
                        </div>
                    </li>
                    <li class="py-15 px-5">
                        <input type="checkbox" id="basic_checkbox_4" class="filled-in">
                        <label for="basic_checkbox_4" class="mb-0 h-15"></label>
                        <span class="text-line">吃饭</span>
                        <small class="badge bg-success"><i class="fa fa-clock-o"></i> 3 days</small>
                        <div class="tools">
                            <i class="fa fa-edit"></i>
                            <i class="fa fa-trash-o"></i>
                        </div>
                    </li>
                    <li class="py-15 px-5 by-1">
                        <input type="checkbox" id="basic_checkbox_5" class="filled-in">
                        <label for="basic_checkbox_5" class="mb-0 h-15"></label>
                        <span class="text-line">睡觉</span>
                        <small class="badge bg-primary"><i class="fa fa-clock-o"></i> 1 week</small>
                        <div class="tools">
                            <i class="fa fa-edit"></i>
                            <i class="fa fa-trash-o"></i>
                        </div>
                    </li>
                    <li class="py-15 px-5">
                        <input type="checkbox" id="basic_checkbox_6" class="filled-in">
                        <label for="basic_checkbox_6" class="mb-0 h-15"></label>
                        <span class="text-line">打火猫</span>
                        <small class="badge bg-info"><i class="fa fa-clock-o"></i> 1 month</small>
                        <div class="tools">
                            <i class="fa fa-edit"></i>
                            <i class="fa fa-trash-o"></i>
                        </div>
                    </li>
                    <li class="py-15 px-5 by-1">
                        <input type="checkbox" id="basic_checkbox_7" class="filled-in">
                        <label for="basic_checkbox_7" class="mb-0 h-15"></label>
                        <span class="text-line">吃饭</span>
                        <small class="badge bg-danger"><i class="fa fa-clock-o"></i> 2 mins</small>
                        <div class="tools">
                            <i class="fa fa-edit"></i>
                            <i class="fa fa-trash-o"></i>
                        </div>
                    </li>
                    <li class="py-15 px-5">
                        <input type="checkbox" id="basic_checkbox_8" class="filled-in">
                        <label for="basic_checkbox_8" class="mb-0 h-15"></label>
                        <span class="text-line">睡觉</span>
                        <small class="badge bg-info"><i class="fa fa-clock-o"></i> 4 hours</small>
                        <div class="tools">
                            <i class="fa fa-edit"></i>
                            <i class="fa fa-trash-o"></i>
                        </div>
                    </li>
                    <li class="py-15 px-5 by-1">
                        <input type="checkbox" id="basic_checkbox_9" class="filled-in">
                        <label for="basic_checkbox_9" class="mb-0 h-15"></label>
                        <span class="text-line">打火猫</span>
                        <small class="badge bg-warning"><i class="fa fa-clock-o"></i> 1 day</small>
                        <div class="tools">
                            <i class="fa fa-edit"></i>
                            <i class="fa fa-trash-o"></i>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </aside>
    <div class="control-sidebar-bg"></div>
</div>
<div class="sticky-toolbar">
    <a href="#" data-toggle="tooltip" data-placement="left" title="快照"
       class="waves-effect waves-light btn btn-success btn-flat mb-5 btn-sm" target="_blank">
        <span class="icon-Money"><span class="path1"></span><span class="path2"></span></span>
    </a>
    <a href="javascript:void(0);" data-toggle="tooltip" data-placement="left" title="新窗口"
       class="waves-effect waves-light btn btn-danger btn-flat mb-5 btn-sm" target="_blank">
        <span class="icon-Image"></span>
    </a>
    <a id="chat-popup" href="#" data-toggle="tooltip" data-placement="left" title="聊天"
       class="waves-effect waves-light btn btn-warning btn-flat btn-sm">
        <span class="icon-Group-chat"><span class="path1"></span><span class="path2"></span></span>
    </a>
</div>
<div id="chat-box-body">
    <div id="chat-circle" class="waves-effect waves-circle btn btn-circle btn-lg btn-warning l-h-70">
        <div id="chat-overlay"></div>
        <span class="icon-Group-chat font-size-30"><span class="path1"></span><span class="path2"></span></span>
    </div>

    <div class="chat-box">
        <div class="chat-box-header p-15 d-flex justify-content-between align-items-center">
            <div class="btn-group">
                <button class="waves-effect waves-circle btn btn-circle btn-primary-light h-40 w-40 rounded-circle l-h-45"
                        type="button" data-toggle="dropdown">
                    <span class="icon-Add-user font-size-22"><span class="path1"></span><span
                            class="path2"></span></span>
                </button>
                <div class="dropdown-menu min-w-200">
                    <a class="dropdown-item font-size-16" href="#">
                        <span class="icon-Color mr-15"></span>
                        新群聊</a>
                    <a class="dropdown-item font-size-16" href="#">
                        <span class="icon-Clipboard mr-15"><span class="path1"></span><span class="path2"></span><span
                                class="path3"></span><span class="path4"></span></span>
                        联系人</a>
                    <a class="dropdown-item font-size-16" href="#">
                        <span class="icon-Group mr-15"><span class="path1"></span><span class="path2"></span></span>
                        群聊</a>
                    <a class="dropdown-item font-size-16" href="#">
                        <span class="icon-Active-call mr-15"><span class="path1"></span><span
                                class="path2"></span></span>
                        呼叫</a>
                    <a class="dropdown-item font-size-16" href="#">
                        <span class="icon-Settings1 mr-15"><span class="path1"></span><span class="path2"></span></span>
                        设置</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item font-size-16" href="#">
                        <span class="icon-Question-circle mr-15"><span class="path1"></span><span class="path2"></span></span>
                        帮助</a>
                    <a class="dropdown-item font-size-16" href="#">
                        <span class="icon-Notifications mr-15"><span class="path1"></span><span
                                class="path2"></span></span>
                        隐私</a>
                </div>
            </div>
            <div class="text-center flex-grow-1">
                <div class="text-dark font-size-18">HOPPIN</div>
                <div>
                    <span class="badge badge-sm badge-dot badge-primary"></span>
                    <span class="text-muted font-size-12">在线</span>
                </div>
            </div>
            <div class="chat-box-toggle">
                <button id="chat-box-toggle"
                        class="waves-effect waves-circle btn btn-circle btn-danger-light h-40 w-40 rounded-circle l-h-45"
                        type="button">
                    <span class="icon-Close font-size-22"><span class="path1"></span><span class="path2"></span></span>
                </button>
            </div>
        </div>
        <div class="chat-box-body">
            <div class="chat-box-overlay">
            </div>
            <div class="chat-logs">
                <div class="chat-msg user">
                    <div class="d-flex align-items-center">
                            <span class="msg-avatar">
                                <img src="http://hoppinzq.com/zui/static/picture/0.jpg"
                                     class="avatar avatar-lg rounded-circle">
                            </span>
                        <div class="mx-10">
                            <a href="#" class="text-dark hover-primary font-weight-bold">HOPPIN</a>
                            <p class="text-muted font-size-12 mb-0">2 小时</p>
                        </div>
                    </div>
                    <div class="cm-msg-text">
                        我是客服HOPPIN
                    </div>
                </div>
                <div class="chat-msg self">
                    <div class="d-flex align-items-center justify-content-end">
                        <div class="mx-10">
                            <a href="#" class="text-dark hover-primary font-weight-bold">你</a>
                            <p class="text-muted font-size-12 mb-0">3 分钟</p>
                        </div>
                        <span class="msg-avatar">
                                <img src="http://hoppinzq.com/zui/static/picture/0.jpg"
                                     class="avatar avatar-lg rounded-circle">
                            </span>
                    </div>
                    <div class="cm-msg-text">
                        我是hoppin的小迷弟
                    </div>
                </div>
                <div class="chat-msg user">
                    <div class="d-flex align-items-center">
                            <span class="msg-avatar">
                                <img src="http://hoppinzq.com/zui/static/picture/0.jpg"
                                     class="avatar avatar-lg rounded-circle">
                            </span>
                        <div class="mx-10">
                            <a href="#" class="text-dark hover-primary font-weight-bold">HOPPIN</a>
                            <p class="text-muted font-size-12 mb-0">40 秒</p>
                        </div>
                    </div>
                    <div class="cm-msg-text">
                        好吧<br>有事吗帮助你的？
                    </div>
                </div>
            </div>
        </div>
        <div class="chat-input">
            <form>
                <input type="text" id="chat-input" placeholder="发送消息">
                <button type="submit" class="chat-submit" id="chat-submit">
                    <span class="icon-Send font-size-22"></span>
                </button>
            </form>
        </div>
    </div>
</div>
<script src="http://hoppinzq.com/zui/static/js/vendors.min.js"></script>
<script src="http://hoppinzq.com/zui/static/js/chat-popup.js"></script>
<script src="http://hoppinzq.com/zui/static/js/feather.min.js"></script>
<script src="http://hoppinzq.com/zui/static/js/anime.min.js"></script>
<script src="http://hoppinzq.com/static/js/plugins/highlight.min.js"></script>

<script src="http://hoppinzq.com/zui/static/js/template.min.js"></script>
<script src="../../static/script/main.js"></script>
<script>
    hljs.initHighlightingOnLoad();
    $(".animation").click(function () {
        let $boxBody=$(this).parents(".box-header").next();
        let $boxFooter=$boxBody.next();
        let htmlCache=$(this).data("animation");
        if(htmlCache==null){
            let footerHtml=$boxFooter.html();
            $(this).data("animation",footerHtml);
        }else{
            $boxFooter.html(htmlCache);
        }
        let code = $boxBody.find("pre").text();
        eval(code);
    })
    $(".animation-copy").click(function () {
        $(".animation-copy").text("复制代码");
        let $pre = $(this).parents(".box-header").next().find("pre");
        selectText($pre.get(0))
        let code = $pre.text();
        let save = function (e) {
            e.clipboardData.setData('text/plain', code);
            e.preventDefault();
        }
        document.addEventListener('copy', save);
        document.execCommand("copy");
        $(this).text("复制成功!");
    })

    function selectText(element) {
        if (document.body.createTextRange) {
            let range = document.body.createTextRange();
            range.moveToElementText(element);
            range.select();
        } else if (window.getSelection) {
            let selection = window.getSelection();
            let range = document.createRange();
            range.selectNodeContents(element);
            selection.removeAllRanges();
            selection.addRange(range);
        } else {
            alert('复制失败');
        }
    }

</script>
</body>
</html>
